Не удается прочитать свойство 'значение' пустого поля ввода?

Question

Всякий раз, когда я набираю в поле input, я получаю следующую ошибку: -

Невозможно прочитать свойство 'value' из null

У меня есть одна форма, в которой у меня есть одно input поле значение поиска , когда я пытаюсь что-то напечатать, я получаю сообщение об ошибке.

Здесь - мой код.

Проблемы с этой функцией

handleInputFieldChange = (event, name) => {
    this.setState(preState => ({
      ...preState,
      form: {
        ...preState.form,
        [name]: event.target.value
      }
    }));
  };

Answer 1

Есть предупреждение от самой React lib, которое в основном поможет вам решить эту проблему.

Предупреждение. Это искусственное событие используется повторно по соображениям производительности. Если вы видите это, вы получаете доступ к свойству target на выпущено / аннулировано синтетическое событие. Это значение равно нулю. Если вы должны чтобы сохранить оригинальное синтетическое событие, используйте event.persist()

Таким образом, исправление заключается в получении ссылки на целевой объект в локальной переменной, как показано ниже.

handleInputFieldChange = (event, name) => {
    const { target } = event;
    this.setState(preState => ({
      ...preState,
      form: {
        ...preState.form,
        [name]: target.value
      }
    }));
  };

Это происходит только при использовании функции updater с методом setState. Они попросили использовать event.persist(), но в моем приложении просто взять ссылку на объект target, чтобы использовать его внутри функции обновления , которая работает на 100%.

Оформление документа Объединение событий

SyntheticEvent объединяется. Это означает, что SyntheticEvent объект будет использован повторно, и все свойства будут аннулированы после обратный вызов события был вызван. Это из соображений производительности. Как например, вы не можете получить доступ к событию асинхронным способом.

Если вы хотите получить доступ к свойствам события асинхронным способом, вы должен вызвать event.persist () для события, которое удалит синтетическое событие из пула и позволяет ссылаться на событие сохраняется кодом пользователя.