Question

我发现了许多与复选框相关的问题，但与我的问题无关。请检查并提供帮助。

我有10多个复选框，它们根据API数据（循环列表）动态创建。

在这里我想知道onClick复选框是未选中还是已选中（因此我将调用其他API）。

要了解/确认选中或未选中，我尝试使用状态。但是问题是我正在检查/取消选中所有复选框都受到相同的影响。

请帮助我单独处理。

我的代码如下：

 this.state = {
        isChecked: true,
    };

 handleClick = (e) => {
    console.log("clicked", e.fieldId);
    this.setState((prevState) => ({
      isChecked: !prevState.isChecked,
    }));

 if(this.state.isChecked){
       // update to API 1
  }else{
     // update to API 2
  }
  };

 <input
         type="checkbox"
         checked={this.state.isChecked}
         onClick={() => this.handleClick(subitems)}
         name="check"
 />
 <label className="form-check-label cost-blue">
 {subitems.message}
 </label>

注意：已经根据API列表数据选中了某些复选框。但是通过使用状态，我也无法处理

编辑：这是我从API循环的方式

Object.keys(dataMap).map((value, key) => {
                return (
                  <div className="mt-10">
                    <div className="row text-center m-0 p-box white">
                      <div>
                        <img src={plant_icon} alt="plant" />
                        <span className="mb-0">&nbsp;&nbsp; {value}</span>
                      </div>
                    </div>
                    {dataMap[value].map((subitems) => {
                      return (
                        <div className="form-check custom-cb m-10">
                          <input
                            className="form-check-input mt-7"
                            type="checkbox"
                            checked={this.state.isChecked}
                            onClick={() => this.handleClick(subitems)}
                            name="check"
                          />
                          <label className="form-check-label cost-blue">
                            {subitems.message}
                          </label>
                        </div>
                      );
                    })}
                  </div>
                );
              })

onClick，如何知道多个复选框中的复选框处于选中状态还是未选中状态？

0 个答案: