Обрабатываем несколько полей ввода в React.js

Если нам надо обеспечить обработку нескольких контролируемых элементов input, мы можем добавить name-атрибут на каждый элемент, позволив функции-обработчику выбрать, что конкретно делать с учетом значения event.target.name. Рассмотрим соответствующий пример:

На что тут важно обратить внимание? На то, что мы задействовали синтаксис вычисляемого имени свойства из ES6, что было сделано в целях обновления ключа состояния, соответствующего конкретному и определенному имени поля ввода:

Что, в принципе, эквивалентно нижеследующему коду в ES5:

Также следует добавить, что раз setState() автоматически объединяет частичное состояние в состояние текущее, то нам следует лишь вызвать его с измененными частями.

По материалам https://ru.react.js.org/.