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

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

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

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

最佳答案

您已经将所选选项保存到您的状态。因此，在您的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>

关于javascript - 如何使用reactjs验证对象数组，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57869865/