React（JSX）中的子级到父级通信没有流量 [英] Child to parent communication in React (JSX) without flux

问题描述

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

I'm really new to React, and I'm pulling my hair out trying to solve what seems to me to be a simple problem. Here's a picture of the component I've built.

颜色选择组件

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

What I'm trying to accomplish seems trivial, but literally every article I've read explaining what to do has told me something different, and not one of the solutions has worked. It breaks down to this: When a user clicks on a tag, it builds out a tray and loops through an array of colors to build color buttons. When a color button is clicked it needs to pass which color was clicked to its parent component and run a function to update its color. I've read about flux, event bubbling, binding "this" to a property, and none of those solutions has seemed to work. The React docs are basically useless for a newbie like myself. I want to avoid complicated event structures like flux at this point since I'm appending some simple components to an existing app that I didn't write in React originally.

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

Also, PS, This code is in JSX which makes much more sense to me than straight JS react. Thanks in advance for your help!

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

推荐答案

回调函数应该有效。正如您在之前的评论中提到的，您可以使用捕获的此来访问子项中的 updateColor 函数：

The callback function should work. As you've mentioned in your previous comment you can use your captured this to access the updateColor function from the child:

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

或者正如Bogdan所说，你可以在你的回调函数后通过地图传递它：

Or as Bogdan mentioned you can pass it through map after your callback function:

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

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

Your <ColorButton /> component should then be able to run a simple onClick function:

onClick={this.props.update}

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

And then you can simply make use of normal event targets in the parent component to capture the color of the button that was clicked:

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

这是一个完整的 DEMO 演示。

这篇关于React（JSX）中的子级到父级通信没有流量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！