@terrence
В React.js события обрабатываются с помощью функций-обработчиков (event handlers), которые выполняются при определенном действии пользователя, например, при щелчке на элементе, нажатии клавиши или изменении значения в форме.
Создание обработчика события на компоненте в React.js можно выполнить несколькими способами:
1 2 3 4 5 6 7 |
function handleClick() { alert('Кнопка нажата!'); } function MyButton() { return <button onClick={handleClick}>Нажми меня</button>; } |
1 2 3 4 5 6 7 |
function MyInput() { const handleChange = (event) => { console.log(event.target.value); }; return <input type="text" onChange={handleChange} />; } |
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-элементы, а на компоненты, поэтому обработчики событий должны быть определены в том компоненте, на котором они используются.
@terrence
Вот пример более подробного объяснения того, как создать обработчики событий на компоненте в React.js.
1 2 3 4 5 6 7 8 9 |
import React from 'react'; function MyButton() { const handleClick = () => { alert('Кнопка нажата!'); }; return <button onClick={handleClick}>Нажми меня</button>; } |
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 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 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. Важно запомнить, что обработчики событий следует определять непосредственно в компоненте, в котором они используются для управления поведением приложения.