Question

我很好奇如何实现主/从复选框系统。我目前采取的方法是在主/从复选框之间建立所有者/ ownee（父/子）关系。但是，我很好奇是否有办法在React中实现这一点，如果复选框是兄弟姐妹而不是。我在docs看到它说要使用你自己的全局事件系统。有人可以解释/向我展示他们的意思吗？谢谢！

Answer 1

在我的Backbone + React应用程序中，当我没有任何其他选项来通信组件之间的状态时，我使用骨干事件。我非常确定您可以找到其他最小的事件库，或者根据需要建立自己的事件来沟通事件。

以下是来自jsFiddle http://jsfiddle.net/kb3gN/2239/的示例代码，我已为您的方案提供。

来自＆＃39; MasterCheckbox＆＃39;组件的onChange事件我触发全局应用程序范围的复选框：点击＆＃39;事件对象上可以被其他组件/视图访问的事件。

//Global event object
window.App = _.extend({}, Backbone.Events);

//MasterCheckbox component's change handler
handleChange: function () {
  this.setState({checked: this.refs.master.getDOMNode().checked});
  App.trigger('checkbox:clicked', this.refs.master.getDOMNode().checked);
}

然后在＆＃39; SlaveCheckbox＆＃39;组件我订阅该事件并更改
的状态＆＃39; SlaveCheckbox＆＃39;成分

componentDidMount: function(){
     App.on('checkbox:clicked', function(state){this.setState({checked: state}) }.bind(this));
}

Answer 2

您可以将两个复选框包装到自己的组件中以制作MasterSlaveComponent。不确定你想要的确切功能，但这里有一个例子，打开Master也打开Slave。

var MasterSlaveCheckbox = React.createClass({
    getInitialState: function(){
      return {
        master: false,
        slave: false
      }
    },

    handleMasterChange: function() {
      var newMasterState = !this.state.master;

      if(newMasterState) {
        this.setState({master: true, slave: true});
      } else {
        this.setState({master: false});
      }
    },

    handleSlaveChange: function() {
      this.setState({slave: !this.state.slave});
    },

    render: function() {
        return <div>
            <div>
              <input type="checkbox" checked={this.state.master} onChange={this.handleMasterChange} />
              Master
            </div>

            <div>
              <input type="checkbox" checked={this.state.slave} onChange={this.handleSlaveChange}  />
              Slave
            </div>
        </div>;
    }
});

https://jsfiddle.net/crob611/z6ozz62a/1/

如何在ReactJS中为主/从复选框系统更改兄弟组件的状态？

2 个答案: