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

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

от terrence , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от ciara , год назад

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

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

от bart , 2 месяца назад

@terrence 

Вот пример более подробного объяснения того, как создать обработчики событий на компоненте в React.js.

  1. С использованием функционального компонента:
1
2
3
4
5
6
7
8
9
import React from 'react';

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

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


  1. С использованием хука useState:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
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} />;
}


  1. С использованием классового компонента:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import React from 'react';

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

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


  1. Асинхронный обработчик события:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import React from 'react';

function MyButton() {
  const handleClick = async () => {
    try {
      const response = await fetchData();
      console.log(response);
    } catch (error) {
      console.error(error);
    }
  };

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


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