javascript – 没有通量的React(JSX)中的子到父通信

2019-10-05 19:37:03 阅读：226 来源： 互联网

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

解决方法:

回调函数应该工作.正如您在之前的评论中提到的那样,您可以使用捕获的内容来访问子项中的updateColor函数：

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

或者正如波格丹提到的,你可以在你的回调函数后通过地图传递它：

{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来演示.

标签：jsx,javascript,reactjs,react-jsx
来源： https://codeday.me/bug/20191005/1857400.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 没有通量的React(JSX)中的子到父通信