从组件内访问其他组件引用

Question

我正在寻找一种让两个组件相互通信的方法。我只是想要它，以便在选中或取消选中 <InputCheckboxAll/> 时，它将选中或取消选中所有 <InputCheckbox/> 组件。

var InputCheckboxAll = React.createClass({
  render: function () {
    return (
      <input type='checkbox' {...this.props}/>
    )
  }
})

var InputCheckbox = React.createClass({
  render: function () {
    return (
      <input type='checkbox' {...this.props}/>
    )
  }
})

<InputCheckboxAll ref='masterCheckbox'/>
<InputCheckbox masterRef='masterCheckbox'/>
<InputCheckbox masterRef='masterCheckbox'/>
<InputCheckbox masterRef='masterCheckbox'/>

如何从 <InputCheckboxAll> 组件中选择 dom 上带有 masterCheckbox 的所有引用？

Answer 1

将处理程序传递给 InputCheckboxAll 并将状态传递给 InputCheckbox。

    var InputCheckboxAll = React.createClass({
        handleChange: function(event) {
            this.props.handleChange(event);
        },
      render: function () {
        return (
          <input type='checkbox' {...this.props} onChange={this.handleChange} />
        )
      }
    })

    var InputCheckbox = React.createClass({
      render: function () {
            var checkedValue = this.props.allChecked ? true : this.state.checked;
        return (
          <input checked={checkedValue} type='checkbox' {...this.props}/>
        )
      }
    })

    var CheckMaster = React.createClass({
        getInitialState: function() { return {allChecked: false}; },
        handleChange: function(event) {
            this.setState({allChecked: event.target.value});
        },
        render: function () {
            return (
                <div>
                    <InputCheckboxAll handleChange={this.handleChange}/>
                    <InputCheckbox allChecked={this.state.allChecked}/>
                    <InputCheckbox allChecked={this.state.allChecked}/>
                    <InputCheckbox allChecked={this.state.allChecked}/>
                </div>
            )
        }
    })