Javascript React（JSX）中无通量的子级到父级通信

我真的是个新来的反应者，我正在努力解决一个在我看来很简单的问题。这是我构建的组件的图片

我试图完成的事情似乎微不足道，但实际上，我读过的每一篇解释该做什么的文章都告诉了我一些不同的东西，没有一个解决方案奏效。它可以分解为：当用户单击标签时，它会构建一个托盘，并通过一系列颜色循环来构建颜色按钮。单击颜色按钮时，需要将单击的颜色传递给其父组件，并运行函数更新其颜色。我读过关于通量、事件冒泡、将“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>
        )
    }
})

var colorsArray=[“#ED5851”、“#9CCC64”、“#337AEC”、“#ff7a45”、“#7E58C2”、“#FFEB3B”、“#78909C”、“#FFFFFF”、“#213a4b”]；
var EditDrawer=React.createClass({
updateColor:function（）{
控制台日志（“新颜色：+i”）；
},
render:function（）{
var passTarget=this；
返回(
{colorsArray.map（函数（对象，i）{
返回；
})}
);
}
})
var ColorButton=React.createClass({
render:function（）{
var按钮样式={
背景颜色：this.props.buttonColor，
};
返回(
)
}
})

您只需将回调函数从父组件传递到子组件，如下所示：

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

（使用React.createClass时，所有类方法都已绑定到

this

，因此您无需调用

.bind（this）

）

然后从

ColorButton

组件中，您可以将此回调调用为

this.props.onColorSelect（…）

---

JS-Bin示例：

回调函数应该可以工作。正如您在前面的评论中所提到的，您可以使用捕获的

this

从子级访问

updateColor

函数：

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

然后，您可以简单地使用父组件中的正常事件目标来捕获单击的按钮的颜色：

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

---

这是一个完整的演示。

好的，这在React中非常简单，不使用

通量或
redux
，类似于将道具从父代传递给子代，这里我们可以使用如下回调函数：

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

var colorsArray=[“#ED5851”、“#9CCC64”、“#337AEC”、“#ff7a45”、“#7E58C2”、“#FFEB3B”、“#78909C”、“#FFFFFF”、“#213a4b”]；
var EditDrawer=React.createClass({
updateColor:函数（i）{
警报（“新颜色：+i”）；
},
render:function（）{
返回(
{colorsArray.map（函数（对象，i）{
返回；
}，这个）}
);
}
});
var ColorButton=React.createClass({
updateColor:function（）{
this.props.updateColor（this.props.buttonColor）；
},
render:function（）{
var按钮样式={
背景颜色：this.props.buttonColor，
};
返回(
这个。道具。按钮颜色
)
}
});
请注意，我尝试使用了两种技术，但都不起作用。谢谢博格丹！不幸的是，这只是返回错误：“无法读取未定义的属性'updateColor'。我想这是因为我在一个数组中循环，所以“this”被覆盖了。为了解决这个问题，我在前面定义了一个变量来捕获“this”，这允许我从子对象访问updateColor函数。唯一的问题是，如果我尝试将任何内容传递给函数，它将在创建时运行函数九次，而不是等待单击
onClick={this.props.onColorSelect（this.props.buttonColor）}
关于将
this
传递到Array.map中-您还可以将其作为第二个参数
.map（函数…，this）
传递，然后使用外部范围中的此参数。关于
onClick={this.props.onColorSelect（this.props.buttonColor）}
，您不是在这里传递函数，而是在渲染和传递结果期间调用它。您需要在组件中创建单独的函数。这很有意义。下星期我要试一试。谢谢你的帮助！这看起来很有希望。我周末已经下班了，但下周我会去查看并在这里更新。谢谢你的帮助！这工作做得很好，非常感谢你的帮助！
updateColor: function(e) {
  console.log(e.target.style.backgroundColor);
}

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