javascript - 如何在反应循环中设置动态复选框的状态？

Question

我正在循环加载复选框。我在设置动态复选框的状态时遇到了困难。

我正在循环加载复选框。我需要设置复选框的状态以使其工作。当我设置状态时，每个复选框都会被选中，所以请给我一个解决方案

组件初始化

const ChildComponent = props =>
  <div key={"comp" + props.number} className="relay-team-list">
      <div className="read-more">
          <a href="#">Team {props.number} - Click to Rename</a>
      </div>
      {
          props.members_arr.length > 0 ? (
              props.members_arr.map((member, i) =>
                  member.position === props.number ? (
                      <div key={"members" + i} className="columns is-mobile list-item" id={"member" + props.number}>
                          <div className="column is-one-third">
                              <img src={require('../images/user.png')} />
                          </div>
                          <div className="column txt-mid-grey relay-team-list-text">
                              <p>{member.members_arr.member_name}</p>
                              <p></p>
                              <span className="check-icon"><input type="checkbox" value="checkedB"
                                  checked={this.state.enabledCheckBox + i}
                                  label={{ children: 'cardreader' + i }}
                                  onChange={this.passMemberID}
                              /></span>

                          </div>
                      </div>
                  ) : ''
              )
          ) : ''
      }
  </div>;

功能

passMemberID = () => {
  this.setState((prevState, props) => ({
    enabledCheckBox: !prevState.enabledCheckBox
  }), () => console.log(this.state.enabledCheckBox))
}

构造函数

constructor(props) {
  super(props);
  this.state = {
    enabledCheckBox: false,
  }
}

我需要为每个复选框设置不同的状态，这样我就可以一个一个地单击它们，现在所有的都被一次检查

标签： javascriptreactjscheckboxstate

Answer 1

构造函数：

constructor(props) {
  super(props);
  this.state = {
    checkBoxObj: {}
  };
}

零件：

<input type="checkbox" 
     checked = {this.state.checkBoxObj[i] || false}
     onChange={() => this.passMemberID(i)}
/>

功能：

passMemberID = (i) => {
  this.setState({
    checkBoxObj: {
      ...this.state.checkBoxObj, ...{[i]: !this.state.checkBoxObj[i]}
    }
  })
}