Javascript 电子邮件输入警告-组件正在将文本类型的受控输入更改为非受控输入

在我的React应用程序中，我的电子邮件输入字段在onChange事件中出现以下错误：

警告：组件正在更改的受控输入 键入要控制的文本。输入元素不应从 受控到不受控（或反之亦然）

这是导致此警告的onChange块；如果我删除第一个if块，错误就会消失，但是我当然需要它来进行电子邮件验证

validateEmail(email) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

handleOnChange = e => {
const { name, value } = e.target;
const emailInput = e.target.value;
const emailValid = this.validateEmail(emailInput);

if (name === 'email') {
  this.setState({
    inputs: {
      email: emailInput,
    },
    errors: {
      email: !emailValid,
    },
  });
} else {
  this.setState({
    inputs: {
      ...this.state.inputs,
      [name]: value,
    },
    errors: {
      ...this.state.errors,
      [name]: false,
    },
  });
}
};

---

如何保留当前代码并处理警告？

您需要在if块中传播现有/以前的状态。您可能有其他

input

标记，这些标记最初连接到

input state

对象，如下所示：

inputs: {
   name: "",
   email: "",
   message: ""
}

<input value={this.state.input.name} name="name"/>
<input value={this.state.input.email} name="email"/>
<input value={this.state.input.message} name="message"/>

您需要做的是扩展现有状态，这样就不会丢失输入对象中的其他键/值对：将

handleChange（）

函数更新为：

handleOnChange = e => {
const { name, value } = e.target;
const emailInput = e.target.value;
const emailValid = this.validateEmail(emailInput);

if (name === 'email') {
  this.setState({
    inputs: {
      ...this.state.inputs,
      email: emailInput,
    },
    errors: {
      ...this.state.errors,
      email: !emailValid,
    },
  });
} else {
  this.setState({
    inputs: {
      ...this.state.inputs,
      [name]: value,
    },
    errors: {
      ...this.state.errors,
      [name]: false,
    },
  });
}
};

---

您需要在if块中展开现有/以前的状态。您可能有其他

input

标记，这些标记最初连接到

input state

对象，如下所示：

inputs: {
   name: "",
   email: "",
   message: ""
}

<input value={this.state.input.name} name="name"/>
<input value={this.state.input.email} name="email"/>
<input value={this.state.input.message} name="message"/>

您需要做的是扩展现有状态，这样就不会丢失输入对象中的其他键/值对：将

handleChange（）

函数更新为：

handleOnChange = e => {
const { name, value } = e.target;
const emailInput = e.target.value;
const emailValid = this.validateEmail(emailInput);

if (name === 'email') {
  this.setState({
    inputs: {
      ...this.state.inputs,
      email: emailInput,
    },
    errors: {
      ...this.state.errors,
      email: !emailValid,
    },
  });
} else {
  this.setState({
    inputs: {
      ...this.state.inputs,
      [name]: value,
    },
    errors: {
      ...this.state.errors,
      [name]: false,
    },
  });
}
};

---

试试下面我的解决方案。让我知道，如果这清除了一切：）尝试我的解决方案如下。让我知道，如果这澄清了一切：）很好的解释。我完全忘记了排列，尽管我在else块中使用了它。你的解释很清楚！令人惊叹的！很高兴你发现这很有帮助：）很好的解释。我完全忘记了排列，尽管我在else块中使用了它。你的解释很清楚！令人惊叹的！很高兴您发现这有帮助：）