Javascript HandleCheckBox react已选中和未选中，使列表进入状态

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

1.
1.5

就是这样：

import React, { Component, Fragment } from "react";
import "./style.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isGoing1: false, isGoing2: false };
    this.handleInputChange1 = this.handleInputChange1.bind(this);
    this.handleInputChange2 = this.handleInputChange2.bind(this);
  }
  componentDidMount() {
    this.setState({ isGoing1: false });
    this.setState({ isGoing2: false });
  }
  componentWillUnmount() {
    this.setState({ isGoing1: false });
    this.setState({ isGoing2: false });
  }
  componentDidUpdate(prevProps) {
    console.log("isGoing1" + this.state.isGoing1);
    console.log("isGoing2" + this.state.isGoing2);
  }

  handleInputChange1 = () => {
    this.setState(state => ({
      isGoing1: !state.isGoing1
    }));
  };
  handleInputChange2 = () => {
    this.setState(state => ({
      isGoing2: !state.isGoing2
    }));
  };

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

import React，{Component，Fragment}来自“React”；
导入“/style.css”；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={isGoing1:false，isGoing2:false}；
this.handleInputChange1=this.handleInputChange1.bind（this）；
this.handleInputChange2=this.handleInputChange2.bind（this）；
}
componentDidMount（）{
this.setState（{isGoing1:false}）；
this.setState（{isGoing2:false}）；
}
组件将卸载（）{
this.setState（{isGoing1:false}）；
this.setState（{isGoing2:false}）；
}
componentDidUpdate（prevProps）{
log（“isGoing1”+this.state.isGoing1）；
log（“isGoing2”+this.state.isGoing2）；
}
handleInputChange1=（）=>{
this.setState（state=>({
isGoing1:！state.isGoing1
}));
};
handleInputChange2=（）=>{
this.setState（state=>({
isGoing2:！state.isGoing2
}));
};
render（）{
返回(
1.
1.5
);
}
}

请参阅：

类Human extends React.Component{
建造师（道具）{
超级（道具）；
此.state={
检查状态：{
是1：错，
是去2：错
}
};
}
handleInputChange=（事件）=>{
这是我的国家({
…这个州，
检查状态：{
…这个。状态。检查状态，
[event.target.name]：event.target.checked
}
});
};
render（）{
返回(
1.
1.5
);
}
}

请详细说明您的问题。你到底想要实现什么？如果复选框已选中或未进入状态，是否要存储有关该复选框的信息？请接受下面给出的答案这不是一个好的解决方案，因为我不想为每个复选框创建一个新状态。我想要一个带有列表复选框的状态：[]。如何知道需要多少复选框？如果我们这样做的话，我们只需要通过映射对它们进行迭代，但是这个逻辑非常简单，我想要20个复选框，其中只有更大的数字。所以这个解决方案不是最优的。你应该创建组件

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