Javascript 无法在ReactJS中重复使用复选框函数

我有一个映射函数，它将JSON值显示到复选框中，每个复选框触发另外两个复选框，我使用的JSON有一个最小/最大值，我为每个部分中的复选框选择设置最小/最大值，这两个功能都很好。但是，问题是，一旦单击父复选框并将其展开以显示两个功能复选框，然后我重新执行该过程，单击它以缩小它，然后再次单击它以展开它，子复选框将停止可单击

复选框值作为道具从执行获取/映射的checkbox.js传递到Itemlist.js。如果有人能解释或演示如何实现这一点，我们将不胜感激

React Live代码段：

Checkbox.js

import React from "react";
import "./Checkbox.css";

class Checkboxes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentData: 0,
      limit: 2,
      checked: false
    };
  }

  selectData(id, event) {
    let isSelected = event.currentTarget.checked;
    if (isSelected) {
      if (this.state.currentData < this.props.max) {
        this.setState({ currentData: this.state.currentData + 1 });
      } else {
        event.preventDefault();
        event.currentTarget.checked = false;
      }
    } else {
      if (this.state.currentData > this.props.min) {
        this.setState({ currentData: this.state.currentData - 1 });
      } else {
        event.preventDefault();
        event.currentTarget.checked = true;
      }
    }
  }

  render() {
    const input2Checkboxes =
      this.props.options &&
      this.props.options.map(item => {
        return (
          <div className="inputGroup2">
            {" "}
            <div className="inputGroup">
              <input
                id={this.props.childk + (item.name || item.description)}
                name="checkbox"
                type="checkbox"
                onChange={this.selectData.bind(
                  this,
                  this.props.childk + (item.name || item.description)
                )}
              />
              <label
                htmlFor={this.props.childk + (item.name || item.description)}
              >
                {item.name || item.description}{" "}
                {/** <img src={this.props.img} alt="" /> <span className="pricemod">{props.childprice} SAR</span>
                 */}
              </label>
            </div>
          </div>
        );
      });

    return (
      <form className="form">
        <div>
          {/** <h2>{this.props.title}</h2>*/}
          <div className="inputGroup">
            <input
              id={this.props.childk + this.props.name}
              name="checkbox"
              type="checkbox"
              checked={this.state.checked}
              onChange={this.selectData.bind(
                this,
                this.props.childk + this.props.uniq
              )}
              onChange={() => {
                this.setState({ checked: !this.state.checked });
              }}
            />
            <label htmlFor={this.props.childk + this.props.name}>
              {this.props.name}{" "}
            </label>
          </div>{" "}
          {this.state.checked ? input2Checkboxes : undefined}
        </div>
      </form>
    );
  }
}

export default Checkboxes;

从“React”导入React；
导入“/Checkbox.css”；
类复选框扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
当前数据：0，
限额：2，
勾选：假
};
}
选择数据（id、事件）{
让isSelected=event.currentTarget.checked；
如果（当选）{
if（this.state.currentDatathis.props.min）{
this.setState（{currentData:this.state.currentData-1}）；
}否则{
event.preventDefault（）；
event.currentTarget.checked=true；
}
}
}
render（）{
常量输入2复选框=
这个。道具。选项&&
this.props.options.map（项=>{
返回(
{" "}
{item.name | | item.description}{”“}
{/**{props.childprice}SAR
*/}
);
});
返回(
{/**{this.props.title}*/}
{
this.setState（{checked:！this.state.checked}）；
}}
/>
{this.props.name}{”“}
{" "}
{this.state.checked？Input2Checkbox:未定义}
);
}
}
导出默认复选框；

我调试了你的代码。您不需要在复选框组件中设置状态。 看看selectData方法。条件：

this.state.currentData < this.props.max

条件仅为true一次，因为min和max属性太小（调试时为1），所以在首次选择后，条件始终为false

合适的解决方案：

删除

event.preventDefault（）；
event.currentTarget.checked=true
在其他状态下（输入为非受控部件）

在else语句中调用
setState
我明白了，那么什么才是合适的解决方案呢？您应该使用
setState
而不是
event.currentTarget.checked=false
；Set checked flag无法更新您的UI，因为只有在调用
setState
或
forceUpdate
@AlxL后，React更新dom。我之前的评论有点错误。输入是不受控制的组件，所以您也可以只删除
event.preventDefault（）；event.currentTarget.checked=truethis.state.currentData > this.props.min