Предупреждение о входе по электронной почте - компонент меняет контролируемый ввод текста типа на неконтролируемый

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