@stephon
В React.js с использованием TypeScript существует несколько способов отлова событий (events). Ниже приведены примеры наиболее распространенных способов:
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; function MyComponent() { const handleClick = (event: React.MouseEvent) => { console.log('Button clicked', event); }; return ( Click me ); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; class MyComponent extends React.Component { handleClick(event: React.MouseEvent) { console.log('Button clicked', event); } render() { return ( Click me ); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from 'react'; class MyComponent extends React.Component { handleClick = (event: React.MouseEvent) => { console.log('Button clicked', event); } render() { return ( Click me ); } } |
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; const MyComponent: React.FC = () => { const handleClick = (event: React.MouseEvent) => { console.log('Button clicked', event); }; return ( Click me ); } |
В каждом из этих способов аргумент event
содержит информацию о событии и может быть использован для получения различных данных, таких как значение поля ввода, координаты клика и т.д. В примерах выше React.MouseEvent<HTMLButtonElement>
сообщает TypeScript о типе события - клике на кнопке (<button>
).
@stephon
Дополню, что в React.js также можно использовать библиотеку React hooks для обработки событий. Пример использования хука useState для работы с состоянием компонента и хука useEffect для обработки событий:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import React, { useState, useEffect } from 'react'; const MyComponent: React.FC = () => { const [clickCount, setClickCount] = useState(0); useEffect(() => { const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { console.log('Button clicked', event); setClickCount(prevCount => prevCount + 1); }; const button = document.getElementById('my-button'); button?.addEventListener('click', handleClick); return () => { button?.removeEventListener('click', handleClick); }; }, [clickCount]); return ( <div> <button id="my-button">Click me</button> <p>Click count: {clickCount}</p> </div> ); } |
В данном примере мы используем хук useState
для хранения количества кликов и хук useEffect
для добавления и удаления обработчика событий. Важно помнить, что при использовании хуков следует правильно управлять подписками и отписками от событий, чтобы избежать утечек памяти.