React（JSX）中的子对父通信，无需通量

Question

我真的是React的新手，我想解决我认为很简单的问题。这是我构建的组件的图片。

拾色组件

我试图完成的工作似乎很琐碎，但实际上，我读过的每一篇解释做什么的文章都告诉我一些不同的东西，而没有一种解决方案有效。它可以分解为：当用户单击标签时，它会构建一个托盘并循环遍历各种颜色以构建颜色按钮。单击颜色按钮时，它需要将单击的颜色传递给其父组件，并运行一个函数来更新其颜色。我已经阅读了有关通量，事件冒泡，将“
this”绑定到属性的信息，但这些解决方案似乎都无效。对于像我这样的新手，React文档基本上是没有用的。我现在想避免复杂的事件结构（例如flux），因为我将一些简单的组件添加到了我最初没有在React中编写的现有应用程序中。

另外，PS，此代码在JSX中，对我而言比直接的JS反应有意义。在此先感谢您的帮助！

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>
        )
    }
})

Answer 1

回调函数应该起作用。正如您在上一条评论中提到的那样，您可以使用捕获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);
}

这是一个完整的演示示例。