React - 提交时将所有空输入字段的 setState 设置为 True

Question

如果输入字段为空，我想动态地将 setState 设置为 true。这样我就可以在每个输入字段为空时通过 css class 设置样式，当它的状态为真时。

在我当前的代码中，它将运行通过循环并将最后一个空项设置为 true，即使所有输入都是空的。在我看来，我认为它应该将所有为空的内容设置为 true，但看起来循环只会识别最后一次迭代。

如何将所有为空的输入设置为真？

HTML:

<form noValidate onSubmit={this.handleSubmit}>
  <label>Name</label>
  <input className="form-input" type="text" name="name">

  <label>Email</label>
  <input className="form-input" type="text" name="email">

  <label>Message</label>
  <input className="form-input" type="text" name="message">
</Form>

州：

this.state = {
  errors: {
    name: false,
    email: false,
    message: false,
  },
};

JS:

handleSubmit = (e) => {

let inputFields = document.getElementsByClassName('form-input');

for (var i = 0; i < inputFields.length; i++) {
  if (inputFields[i].value === '') {

    let inputName = inputFields[i].name;

    this.setState({
      errors: {
        [inputName]: true,
      },
    });
  }
}

}

Answer 1

问题是 setState 仅将根密钥合并到状态中。在您的情况下，您的状态是 { errors { ... } }，通过执行 setState({ error: { ... } })，反应会替换状态内的整个错误对象。

您可以在循环中制作 errors 对象，并且只执行一次 setState：

handleSubmit = (e) => {
  let inputFields = document.getElementsByClassName('form-input');
  let errors = {};
  for (var i = 0; i < inputFields.length; i++) {
    if (inputFields[i].value === '') {
      let inputName = inputFields[i].name;
      errors[inputName] = true;
    }
  }
  this.setState({errors});
}

这是更好的方法。但是，如果您也看一下这种方法，可能有助于理解 setState 的工作原理：

您可以将键从 errors 移动到状态的根目录，因此 React 会将它们合并到状态中而不是替换它们。

this.state = {
 nameError: false,
 emailError: false,
 messageError: false,
};

和

this.setState({
  [`${inputName}Error`]: true,
});

Answer 2

为了在保持组件当前状态结构的同时实现您的要求，请考虑对 handleSubmit 进行以下更改：

handleSubmit = (e) => {
    let inputFields = document.getElementsByClassName('form-input');

    /* Define errors object which will contain updated errors state based
    on form values */
    let errors = {};

    for (var i = 0; i < inputFields.length; i++) {
    if (inputFields[i].value === '') {

        let inputName = inputFields[i].name;

        /* Gather all error state into a single object */
        errors = { ...errors, [inputName]: true };
    }
    }

    /* Call setState once - this is more efficient and simplifies updating
    the nested errors object */
    this.setState((state) => {

        /* Replace nested error state with newly defined errors object */
        return { ...state, errors }
    });
}

这里我们利用 errors 状态相对于表单的行为，因为它可以根据 handleSubmit 函数期间表单输入的值重新创建。

首先，errors 对象是根据表单输入的值在本地定义和组合的。这个 errors 对象根据输入值捕获表单的新错误状态。最后，setState 通过回调被调用一次。在这里，本地创建的 errors 对象被指定为组件的新嵌套 errors 状态。

React - 提交时将所有空输入字段的 setState 设置为 True

React - setState to True for All Empty Input Fields on Submit

javascript

forms

setstate

reactjs