是否应该将组件委托 onChange 事件响应给父级？答案

【问题标题】：Should react component delegate onChange events to parent?是否应该将组件委托 onChange 事件响应给父级？
【发布时间】：2016-02-17 11:06:25
【问题描述】：

我正在使用对 Flux 架构做出反应。我有一个关于最佳实践的问题。我们有两个组件：容器和项目：

var Contaner = React.createClass({
    getInitialState: function () {
        return {
            items: [ 'hello', 'world' ]
        }
    },
    onClick: function () {
        console.log('clicked!');
    },
    render: function () {
        return 
            <div>
                {this.state.items.map(function (item) {
                    return <Item data={item} onClick={this.onClick} />
                })}
            </div>;
    }
});

var Item = React.createClass({
    getInitialState: function () {
    render: function () {
        return 
            <div>
                <button onClick={this.props.onClick}>{this.props.data}</button>
            </div>
    }
});

那么，问题是：我应该将 onClick 委托给父组件（容器）还是在 item 组件中实现它，为什么？

【问题讨论】：

标签： reactjs components flux

【解决方案1】：

取决于您在点击处理程序中需要什么。您是否需要在单击处理程序中访问容器状态或成员变量或方法？如果是，那么无论如何将处理程序定义为容器的方法并将其作为属性传递给项目。如果不是，那么处理程序的逻辑位置就是项目本身。

如果您需要同时访问这两个组件，例如更改两个组件的状态，则同时使用两者：实现两个处理程序并让项目 onClick 处理程序调用从父项传递的一个作为属性。

【讨论】：