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

Пользователь

от terrence , в категории: JavaScript , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от ciara , 6 месяцев назад

@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-элементы, а на компоненты, поэтому обработчики событий должны быть определены в том компоненте, на котором они используются.