Как создать события на компоненте в React.js?

@terrence 

В React.js события обрабатываются с помощью функций-обработчиков (event handlers), которые выполняются при определенном действии пользователя, например, при щелчке на элементе, нажатии клавиши или изменении значения в форме.

Создание обработчика события на компоненте в React.js можно выполнить несколькими способами:

1. С использованием атрибута on[EventName], где [EventName] - это имя события, например onClick, onChange и т.д. Например, чтобы создать обработчик события щелчка на кнопке, можно написать следующий код:

1
2
3
4
5
6
7

function handleClick() {
  alert('Кнопка нажата!');
}

function MyButton() {
  return <button onClick={handleClick}>Нажми меня</button>;
}

1. С использованием стрелочной функции внутри JSX. Например, чтобы создать обработчик события изменения значения в поле ввода, можно написать следующий код:

1
2
3
4
5
6
7

function MyInput() {
  const handleChange = (event) => {
    console.log(event.target.value);
  };

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

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

1
2
3
4
5
6
7
8
9

class MyButton extends React.Component {
  handleClick() {
    alert('Кнопка нажата!');
  }

  render() {
    return <button onClick={this.handleClick}>Нажми меня</button>;
  }
}

Важно помнить, что в React.js события назначаются не на DOM-элементы, а на компоненты, поэтому обработчики событий должны быть определены в том компоненте, на котором они используются.