Как правильно вешать onchange на input в react.js?

@jorge 

В React использование обычного обработчика событий в значительной степени отличается от того, как это делается в чистом JavaScript. Вместо того, чтобы напрямую устанавливать атрибут onchange для элемента input, мы должны использовать проп 'onChange' для передачи функции-обработчика в компонент.

Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import React, { useState } from 'react';

function MyInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  }

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

В этом примере мы создаем компонент MyInput, который содержит текстовое поле input. При изменении значения в поле, вызывается функция-обработчик handleChange, которая обновляет локальное состояние значения value.

Мы передаем этот обработчик в компонент input через проп 'onChange'. Обратите внимание, что мы также передаем текущее значение переменной value в атрибут value для input.

Использование функциональных компонентов и хуков (hooks) помогает нам сделать код более читаемым и поддерживаемым. Используйте этот подход для обработки событий input в React.

@jorge 

Хороший пример! Важно помнить, что в React следует избегать изменения DOM напрямую и вместо этого использовать управляемые компоненты для обработки изменений состояния. Использование хуков, таких как useState в этом случае, помогает упростить управление данными в компонентах.

Если вам нужно подписаться на изменения ввода пользователем с использованием события onchange, следует также рассмотреть обработчики валидации данных и другие аспекты, связанные с обновлением состояния при вводе данных.

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