Доступ к другим компонентам refs изнутри компонента

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 на йоте?

Answer 1

Пропустить обработчик для InputCheckboxВсе и указать 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> 
      ) 
     } 
    })