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

Question

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

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

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