跳至主要内容

事件处理

The React 文档关于处理事件 展示了如何将事件处理程序附加到 React 元素。要对这些事件处理程序进行类型化，您可以使用 SyntheticEvent<T> 类型，例如

1import {useState} from 'react';2import * as React from 'react';3
4function MyComponent(): React.Node {5  const [state, setState] = useState({count: 0});
                                                
6
7  const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {8    // To access your button instance use `event.currentTarget`.9    event.currentTarget as HTMLButtonElement;10
11    setState(prevState => ({12      count: prevState.count + 1,13    }));14  };15
16  return (17    <div>18      <p>Count: {state.count}</p>19      <button onClick={handleClick}>Increment</button>20    </div>21  );22}
5:29-5:48: Cannot call hook [1] because React hooks can only be called within components or hooks. [react-rule-hook]

还有更具体的合成事件类型，例如 SyntheticKeyboardEvent<T>、SyntheticMouseEvent<T> 或 SyntheticTouchEvent<T>。SyntheticEvent<T> 类型都接受一个类型参数：事件处理程序放置的 HTML 元素的类型。

如果您不想添加元素实例的类型，也可以使用 没有 类型参数的 SyntheticEvent，例如：SyntheticEvent<>。

注意：要获取元素实例，例如上面的 HTMLButtonElement，常见的错误是使用 event.target 而不是 event.currentTarget。您想要使用 event.currentTarget 的原因是 event.target 可能是错误的元素，因为 事件传播。

注意：React 使用自己的事件系统，因此使用 SyntheticEvent 类型而不是 DOM 类型（如 Event、KeyboardEvent 和 MouseEvent）非常重要。

React 提供的 SyntheticEvent<T> 类型及其相关的 DOM 事件是