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

Posted 2023-02-23

【中文标题】电子邮件输入警告 - 组件正在将文本类型的受控输入更改为不受控制

【英文标题】：Email Input Warning - A component is changing a controlled input of type text to be uncontrolled

【发布时间】：2019-11-11 16:12:54

【问题描述】：

在我的 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,
    ,
  );

;

状态：

constructor() 
super();
this.state = 
  inputs: 
    name: '',
    email: '',
    message: '',
  ,
  phone: '',
  show: true,
  errors: 
    name: false,
    email: false,
    message: false,
  ,
;

如何保留当前代码并解决警告？

【问题讨论】：

在下面尝试我的解决方案。让我知道这是否可以解决问题:)

【参考方案1】：

您需要在 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"/>

但是当您在发布的代码中使用this.setState() 时，连接会丢失。您正在将inputs 状态设置为具有电子邮件单一属性的对象：

inputs: 
   email: "valueFromEventTarget"

您需要做的是传播现有状态，这样您就不会丢失输入对象中的其他键/值对：将您的 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 块中使用了它。您的解释完美地阐明了这一点！

太棒了！很高兴你发现这很有帮助:)