Question

我有一个映射功能，可将JSON值显示到复选框中，每个复选框会触发另外2个复选框，我使用的JSON具有一个最小值/最大值，我为每个部分中的复选框选择设置了最小值/最大值。我的问题是，一旦单击了父级和子级复选框，然后重做该过程（在其中单击它以使其收缩并再次单击以展开它），子级复选框将不再可单击。

复选框值作为道具从 Checkbox.js 传递到发生提取/映射的 Itemlist.js 。

反应实时代码段：https://codesandbox.io/embed/2178pwz6or?fontsize=14

Checkbox.js

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;

Answer 1

在代码沙箱代码段中，只需将Checkbox.js组件中的第24行更改为此

if (this.state.currentData >= this.props.min) {

Answer 2

为帮助您了解遇到问题的原因，您可以使用一些有用的调试语句来修改selectData的{{1}}方法：

Checkbox.js

当您选中“ Side 1”然后取消选中它时，您会注意到您不满足条件// Checkbox.js selectData(id, event) { let isSelected = event.currentTarget.checked; console.log( `Attempting to ${isSelected ? "check" : "uncheck"} ${ event.currentTarget.id }` ); console.log(`min is ${this.props.min}, max is ${this.props.max}`); console.log(`currentData is: ${this.state.currentData}`); if (isSelected) { if (this.state.currentData < this.props.max) { console.log('Allowed to check. Incrementing currentData') this.setState({ currentData: this.state.currentData + 1 }); } else { console.log('Not allowed to check: greater than or equal to max') event.preventDefault(); event.currentTarget.checked = false; } } else { if (this.state.currentData > this.props.min) { console.log('Allowed to uncheck. Decrementing currentData') this.setState({ currentData: this.state.currentData - 1 }); } else { console.log('Not allowed to uncheck. Less than or equal to min') // event.preventDefault(); // event.currentTarget.checked = true; } } }，因此您永远无法实际降低if (this.state.currentData > this.props.min)。 / p>

要解决此问题，您需要执行以下两项操作之一：

将您的条件更改为this.state.currentData

OR

更改if (this.state.currentData >= this.props.min)，将data.json设置为0，而不是1。

更新

执行以下步骤时，您也会遇到问题：

检查收藏夹（露出两面）
检查一面（递增min）
取消选中边收集（隐藏边）
再次检查侧面收藏
- 这时，您的身体露出来了，但未被选中
- AND ，并且您的currentData已经是1。
- 因此，您无法检查任何一侧。

要解决此问题，您可以：

每当选中或取消选中边集时，将currentData重置为0。

OR

更改currentData方法，以考虑哪些边已被检查并保留其状态，即使未收集边集合也是如此。

上述2个选项中的第一个更简单。在input2Checkboxes的{{1}}方法中，您需要边收集输入的render如下所示：

Checkbox.js

我已经更新了分叉的代码沙箱以显示正在运行的演示：

复选框限制功能发生后，复选框变得不可点击

2 个答案:

更新