如何在reactJS中处理复选框选中状态

Question

我的React Class中有多个复选框B.js：

<input
   type="checkbox"
   inline={true}
   checked={this.props.checkBoxDefaultStatus}
   onChange={this.handleCheckBoxClick} 
/>

现在道具checkBoxDefaultStatus从父类传递过来A.js。

A.js

this.state = {
  checkBoxDefaultStatus: false
}

handleMultiSelect() {
    this.setState({
        checkBoxDefaultStatus: true
    })
}

render() {
  <B checkBoxDefaultStatus={this.state.checkBoxDefaultStatus} />
}

编辑：现在，当我单击父复选框时，所有我的子复选框都被选中，但是问题是当我单击它们时，我的子复选框的状态未更改，因为它们已经由父项设置。我还需要一些方法来维持这一点。

这是我想要的行为/sf/answers/2465264861/

Answer 1

如果您想更改子组件内的父组件状态，则必须将父组件方法传递给子组件，如下所示：

<B handleCheckBoxClick={this.handleMultiSelect}/>   

检查以下工作代码。我为您的方案构建了2个组件。

<B handleCheckBoxClick={this.handleMultiSelect}/>   

class B extends React.Component {
   constructor(){
    super();
    this.state = {
      checkBoxClick : {
        1: false,
        2: false
      }
    }
    this.handleCheckBoxClick = this.handleCheckBoxClick.bind(this);
   }
   
   handleCheckBoxClick(no, event){
    //console.log('no', no);
    //console.log('event.target.value', event);
    var checkBoxClick = this.state.checkBoxClick;
    checkBoxClick[no] = !this.state.checkBoxClick[no];
    this.setState({
      checkBoxClick
    });
    
    var alltrue =Object.keys(checkBoxClick).every((k) =>{ return checkBoxClick[k] });
    //console.log('alltrue', alltrue);
    if(alltrue){
      // console.log('alltrue in if : ', alltrue);
      this.props.handleMultiSelect();
    }
    
    if(this.props.checkBoxDefaultStatus){
      this.props.handleMultiSelect();
    }
   }

  render(){
    //console.log('this.state.checkBoxClick :', this.state.checkBoxClick);
    //console.log('this.props.checkBoxDefaultStatus :', this.props.checkBoxDefaultStatus);
    return(
    <div>
    Child component check-box <br />
      <input
       type="checkbox"
       checked={this.props.checkBoxDefaultStatus ? this.props.checkBoxDefaultStatus : this.state.checkBoxClick[1]}
       onChange={(e) => {this.handleCheckBoxClick(1, e.target.checked)}} 
    /> Bar 1<br />
    <input
       type="checkbox"
       checked={this.props.checkBoxDefaultStatus ? this.props.checkBoxDefaultStatus : this.state.checkBoxClick[2]}
       onChange={(e) => {this.handleCheckBoxClick(2, e.target.checked)}} 
    /> Bar 2<br />
    </div>
    );
  }
}

class A extends React.Component {

  constructor() {
    super();
    this.state = {
      checkBoxDefaultStatus: false
    }
    
    this.handleMultiSelect = this.handleMultiSelect.bind(this);
  }

  handleMultiSelect() {
    //console.log('aaaa')
    this.setState({
      checkBoxDefaultStatus: !this.state.checkBoxDefaultStatus
    })
  }

  render() {
  //console.log('checkBoxDefaultStatus :', this.state.checkBoxDefaultStatus);

    return (
    <div>
      <input type="checkbox" onClick={() => {this.handleMultiSelect()}} checked={this.state.checkBoxDefaultStatus}/>
      Check all<br />
      <B checkBoxDefaultStatus={this.state.checkBoxDefaultStatus}
        handleMultiSelect={()=>{this.handleMultiSelect()}}
      />
      </div>
    );
  }
}

ReactDOM.render( < A / > , document.getElementById('root'));