@stephon
В React.js с использованием TypeScript существует несколько способов отлова событий (events). Ниже приведены примеры наиболее распространенных способов:
- Использование Inline функций:
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>
).