從組件內部訪問其他組件參考

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