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

Posted 2023-03-05

【中文标题】在 reactJS 中验证复选框的简单函数

【英文标题】：Simple function to Validate checkboxes in reactJS

【发布时间】：2019-08-04 17:11:40

【问题描述】：

我做了一个选择限制功能，确保总复选框高于最小值和低于最大值，这些值取自映射复选框的 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

【问题讨论】：

这个onblur事件将如何被调用？

来自输入表单，例如

能否请您在code.pen中举个例子。通过注释该行并添加仅console.log('x') 的事件然后我可以尝试添加您想要的功能

@AlxL 很抱歉，但完整的代码链接不起作用。能否请您修复它，以便我可以看到完整的组件源代码？

codesandbox.io/embed/8212q2pmw0?fontsize=14

【参考方案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

【讨论】：

请注意 setState 是异步的，并且像您一样访问之前的 currentData 值是不安全的。你应该写this.setState((state) => ( currentData: state.currentData - 1 ));