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

如果输入字段为空，我想动态地将state设置为true。这样，当每个输入字段为空时，我就可以在其“状态”为真时通过css类对其进行样式设置

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

如何将所有空输入的state设置为true

HTML:

JS:

handleSubmit=（e）=>{
让inputFields=document.getElementsByCassName（'form-input'）；
对于（变量i=0；i

问题在于

setState

仅将根键合并到状态中。 在您的情况下，您的状态是

{errors{…}

，通过执行

setState（{error:{…}}）

，react将替换状态中的整个错误对象

您可以在循环中手工创建

错误

对象，并且只执行一次

设置状态

：

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});
}

及

---

为实现您所需要的同时保留组件当前的状态结构，请考虑以下更改：<代码> HuffelSubMi> <代码>：

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 }
    });
}

handleSubmit=（e）=>{
让inputFields=document.getElementsByCassName（'form-input'）；
/*定义错误对象，该对象将包含基于状态的更新错误
论形式价值*/
让错误={}；
对于（变量i=0；i{
/*用新定义的错误对象替换嵌套的错误状态*/
返回{…状态，错误}
});
}

这里我们利用了与表单相关的

错误

状态的行为，因为它可以在

handleSubmit

函数期间基于表单输入的值重新创建

---

首先，一个

errors

对象是基于表单输入的值本地定义和组成的。此

errors

对象根据输入值捕获表单的新错误状态。最后，

setState

通过回调调用一次。在这里，本地创建的

errors

对象被指定为组件的新嵌套

errors

状态。

非常好而且干净的解决方案！这一行的澄清：“errors[inputName]=true；”-我知道它正在填充errors对象，但它是如何做到的？不理解语法，因为错误和[inputName]之间没有空格。thanks@EricNguyen我不确定我是否正确理解了你的问题。当您有一个对象时，如果属性作为字符串存储在变量中，则可以使用方括号读取或写入属性。所以

errors['name']=true

和

error.name=true

是一样的。我建议读一读Thank@Amir我现在明白了，是括号把我给甩了，但我读了一遍。谢谢

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,
      },
    });
  }
}

}

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});
}

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

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

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 }
    });
}