React (JSX) 中的子级到父级通信，没有通量

IT技术 javascript reactjs react-jsx jsx
2021-04-28 10:06:38

我真的是 React 的新手，我正在努力解决在我看来很简单的问题。这是我构建的组件的图片。

颜色选择组件

我试图完成的事情似乎微不足道，但实际上我读过的每一篇解释该做什么的文章都告诉了我一些不同的事情，并且没有一个解决方案有效。它分解为：当用户单击一个标签时，它会构建一个托盘并循环遍历一系列颜色以构建颜色按钮。单击颜色按钮时，它需要将单击的颜色传递给其父组件并运行一个函数来更新其颜色。我读过关于通量、事件冒泡、将“this”绑定到属性的内容，但这些解决方案似乎都不起作用。React 文档对于像我这样的新手来说基本上没用。在这一点上，我想避免复杂的事件结构，例如flux，因为我将一些简单的组件附加到我最初不是在 React 中编写的现有应用程序中。

另外，PS，这段代码在 JSX 中，这对我来说比直接的 JS react更有意义。在此先感谢您的帮助！

var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];

var EditDrawer = React.createClass({
    updateColor: function() {
        console.log("New Color: " + i);
    },
    render: function(){
        var passTarget = this;
        return (
            <div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
                <div className="row">
                    <div className="col-xs-12">
                        {colorsArray.map(function(object, i){
                            return <ColorButton buttonColor={object} key={i} />;
                        })}
                    </div>
                </div>
            </div>
        );
    }
})

var ColorButton = React.createClass({
    render: function(){
        var buttonStyle = {
            backgroundColor: this.props.buttonColor,
        };
        return (
            <div className="tag-edit-color-button" style={buttonStyle} >
            </div>
        )
    }
})
3个回答

回调函数应该可以工作。正如您在之前的评论中提到的，您可以使用捕获的this来访问updateColor孩子的功能：

var passTarget = this;
...
...
return <ColorButton 
  buttonColor={object} 
  key={i} 
  update={passTarget.updateColor} />

或者正如 Bogdan 提到的，您可以在回调函数之后通过 map 传递它：

{colorsArray.map(function(object, i){
  return <ColorButton 
           buttonColor={object} 
           key={i} 
           update={this.updateColor} />;
}, this)}

<ColorButton />然后您的组件应该能够运行一个简单的 onClick 函数：

onClick={this.props.update}

然后你可以简单地使用父组件中的普通事件目标来捕获被点击的按钮的颜色：

updateColor: function(e) {
  console.log(e.target.style.backgroundColor);
}

这里有一个完整的DEMO来演示。

您可以将回调函数从父组件传递给子组件，就像这样简单：

 <ColorButton buttonColor={object} key={i} onColorSelect={this.updateColor}/>

（使用 React.createClass 时，所有类方法都已经绑定到this，因此您不需要调用.bind(this)）。

然后从ColorButton组件中，您可以将此回调称为this.props.onColorSelect(...).

JS Bin 示例：http : //jsbin.com/fivesorume/edit? js, output

好的，这在React 中非常简单，无需使用fluxor redux，类似于将 props 从父级传递给子级，这里我们可以使用这样的回调函数：

var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];


var EditDrawer = React.createClass({
    updateColor: function(i) {
        alert("New Color: " + i);
    },
    render: function(){
        return (
            <div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
                <div className="row">
                    <div className="col-xs-12">
                        {colorsArray.map(function(object, i){
                            return <ColorButton buttonColor={object} key={i} updateColor={this.updateColor}/>;
                        }, this)}
                    </div>
                </div>
            </div>
        );
    }
});


var ColorButton = React.createClass({
    updateColor: function() {
        this.props.updateColor(this.props.buttonColor);
    },
    render: function(){
        var buttonStyle = {
            backgroundColor: this.props.buttonColor,
        };
        return (
            <div className="tag-edit-color-button" 
            style={buttonStyle}
            onClick={this.updateColor}>
              this.props.buttonColor
            </div>
        )
    }
});
其它你可能感兴趣的问题
上一篇我怎样才能使这个圆形外壳可以打印？ 下一篇如何在 React-Kotlin 中导入节点module？