3

我很好奇如何实现主/从复选框系统。我目前采用的方法是在主/从复选框之间建立所有者/所有者（父/子）关系。但是，如果复选框是兄弟姐妹，我很好奇是否有办法在 React 中完成此操作。我在文档中看到它说要使用您自己的全局事件系统。有人可以解释/给我看一个例子来说明他们的意思吗？谢谢！

4

2 回答 2

0

在我的 Backbone+React 应用程序中，当我没有任何其他选项在组件之间传达状态时，我使用主干事件。我敢肯定，如果需要，您可以找到其他最小事件库或构建自己的事件库来传达事件。

下面是来自 jsFiddle http://jsfiddle.net/kb3gN/2239/的示例代码，我为您的场景提供了。

从“MasterCheckbox”组件的 onChange 事件中，我在其他组件/视图可以访问的事件对象上触发了一个全局应用程序范围的“checkbox:clicked”事件。

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

然后在“SlaveCheckbox”组件上订阅该事件并更改
“SlaveCheckbox”组件的状态

componentDidMount: function(){
     App.on('checkbox:clicked', function(state){this.setState({checked: state}) }.bind(this));
}
于 2014-05-08T11:26:20.877 回答
0

您可以将这两个复选框包装到它们自己的组件中以制作 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/

于 2015-05-14T21:05:29.413 回答