Инпуты в стейтах React

Работа с "input" полями в React начинается с того, что каждому полю назначается свой стейт, в котором содержится значение "value" этого поля. Приведём пример создания такой связи:

import React, { useState } from 'react';

function App() {
   const [text, setText] = useState('Тише, мыши, кот на крыше!');

   return <div>
      <input value={text} />
   </div>;
}

export default App;

При изменении стейта будет происходит и реактивное (автоматическое) изменение содержания поля input. Но побочным эффектом такого использования стейтов является невозможность изменить содержание input из браузера. То есть если загрузить страницу с таким кодом, то нельзя будет написать текст в такой "input". Привязка стейта к инпуту блокирует ввод. Чтобы избежать этой проблемы, можно отслеживать событие ввода и менять значение стейта по этому событию. К примеру, через атрибут onChange:

import React, { useState } from 'react';

function App() {
   const [text, setText] = useState('Тише, мыши, кот на крыше!');

   function changeText(event) {
      setText(event.target.value);
   }

   return <div>
      <input value={text} onChange={changeText} />
   </div>;
}

export default App;

Такой код позволит изменять значение в текстовом поле input. Причём в переменной "text" будет всегда содержаться текущее значение стейта (то есть весь текст, введённый в input).

Если ранее работали с чистым JavaScript, то наверняка заметите, что в приведённом примере вместо "event.target.value" стоит написать "this.value". К сожалению, в React так сделать невозможно. Для получения элемента, на котором было вызвано событие, нужно использовать "event.target".

В примере функция "changeText" выполняет только одно действие. Поэтому можно записать его прямо в значение атрибута, используя стрелочную функцию.

import React, { useState } from 'react';

function App() {
   const [text, setText] = useState('Тише, мыши, кот на крыше!');

   return <div>
      <input value={text} onChange={event => setText(event.target.value)} />
   </div>;
}

export default App;

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