javascript - HandleCheckBox 反应选中和未选中，使列表进入状态

Question

我有一长串复选框（没有优化），我想让它们处于一个状态（选中的那个），我不确定如何处理它希望得到帮助（点击时也应该处理取消选中）.. .

              <div className=' row float-center d-flex justify-content-center '>
                <label className='m-3'>
                  <input
                    name='1'
                    type='checkbox'
                    checked={this.state.isGoing}
                    onChange={this.handleInputChange}
                  />
                  1
                </label>
                <label className=' m-3'>
                  <input
                    name='1.5'
                    type='checkbox'
                    checked={this.state.isGoing}
                    onChange={this.handleInputChange}
                  />
                  1.5
                </label>
              </div>

标签： javascripthtmlreactjsjsx

Answer 1

class Human extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkState: {
        isGoing1: false,
        isGoing2: false
      }
    };
  }

  handleInputChange = (event) => {
    this.setState({
      ...this.state,
      checkState: {
        ...this.state.checkState,
        [event.target.name]: event.target.checked
      }
    });
  };

  render() {
    return (
      <div className=" row float-center d-flex justify-content-center ">
        <label className="m-3">
          <input
            name="isGoing1"
            type="checkbox"
            checked={this.state.isGoing1}
            onChange={this.handleInputChange}
          />
          1
        </label>
        <label className=" m-3">
          <input
            name="isGoing2"
            type="checkbox"
            checked={this.state.isGoing2}
            onChange={this.handleInputChange}
          />
          1.5
        </label>
      </div>
    );
  }
}