javascript - 如何使用reactjs验证对象数组

Question

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

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

查看示例代码 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>