從組件內部訪問其他組件引用

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>部分我可以選擇與所有參masterCheckbox的DOM？

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