Question

我正在创建反应表单并验证表单字段，如果该字段为空，则错误消息如下所示，并且状态设置为错误。

我还需要检查选择字段，选择字段是对象数组。如何检查选择选项是否为空？

检查示例代码 https://codesandbox.io/s/flamboyant-flower-2u1xw

Answer 1

您已经将所选选项保存到您的状态。因此，在validate函数中，您只需访问状态并检查所需的属性。另外，请确保与变量名保持一致。在validate函数中，您将自己的返回值命名为formIsValid，但是稍后在调用该函数时，会将返回值用作errors，这会造成混淆。我将formIsValid重命名为hasErrors以保持一致。

  validate() {
    let required = ["name", "description"];
    let errors = {};
    let hasErrors = false;
    let data = this.state.data;

    required.forEach(w => {
      if (!data[w]) {
        hasErrors = true;
        errors[w] = "Please fill the required fields";
      }
    });
    this.setState({ errors: errors });

    // check if at least one option has been selected
    let currentLength = data.roles.length;
    if (!length) {
       hasErrors = true;
       erros["roles"] = "Please fill the required fields";
    }

    return formIsValid;
  }

并像以前一样添加错误范围：

        <div className="form-group">
          <label>Roles</label>
          <Select
            isMulti
            value={this.state.roles}
            options={options}
            onChange={e => this.handleAccessChange(e)}
          />
          <span>{this.state.errors["roles"]}</span>
        </div>

Answer 2

在您的代码中没有验证角色的逻辑。

因此需要以下内容：

  validate() {
    let required = ["name", "description"];
    let errors = {};
    let formIsValid = false;
    let data = this.state.data;

    required.forEach(w => {
      if (!data[w]) {
        formIsValid = true;
        errors[w] = "Please fill the required fields";
      }
    });

    if (this.state.roles.length === 0) {
        formIsValid = false;
        errors["roles"] = "Please select at least one role";
    }

    this.setState({ errors: errors });
    return formIsValid;
  }

https://codesandbox.io/s/funny-yalow-udgq7

如何使用reactjs验证对象数组

2 个答案: