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

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-state对象的input标签，如下所示：

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状态设置为具有单个属性email的对象：

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