Как правильно вешать 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.