在 reactJS 中验证复选框的简单函数

Question

我做了一个选择限制功能，确保总复选框高于最小值和低于最大值，这些值取自映射复选框的 JSON，现在选择限制有效，但我正在尝试添加验证使用 onblur 显示警告，但我不确定如何将相同的函数转换为 onblur 验证函数。例如，如果有人取消选中，它会在控制台上显示您需要至少选择 3 个，直到选中 3 个，与 selectData() 的逻辑相同。

功能

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

完整代码：https://codesandbox.io/embed/48o2jo2500?fontsize=14

Answer 1

您的一般方法似乎应该可行，只需要实际实现错误状态的技巧。不过这里的建议是更新您的 !isSelected && this.state.currentData < this.props.min 条件以允许选择少于三个但向用户显示错误状态。

  ...
    } else {
      if (this.state.currentData >= this.props.min) {
        // this.setState({ currentData: this.state.currentData - 1 });
        // UPDATE:
        this.setState((state) => ({ currentData: state.currentData - 1 }));
      } else {
        event.preventDefault();
        // Don't force the box to be selected, show error state instead
        // Disable calls to filtering, sorting, etc. until error resolved
        // event.currentTarget.checked = true;
      }
    }
  }

基本实现：

• 原版 JavaScript：https://codepen.io/hollyos/pen/XGqryV
• 反应：https://codepen.io/hollyos/pen/EMpXdR