ReactJS onClick 的單個處理程序和 TypeScript 的 onKeyDown 事件

Question

我正在嘗試將onKeyPress處理程序添加到我的應用程序以使其a11y標准。 我有一些交互式<div />元素，它在哪里出現問題。

我有以下事件處理程序，我想在點擊時觸發。

const handleViewInfoClick = (event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>): void => {
  event.preventDefault();
  onProfileClick();
  window.open(withConfig(ConfigEnum.PROPERTY_PROFILE_URL, { propertyID: communityId }), '_blank');
};

我將上述處理程序用作：

<div
  className={classes.community_name}
  onClick={handleViewInfoClick}
  onKeyDown={(e) => {
    if (e.keyCode === 13) {
      handleViewInfoClick(e);
    }
  }}
  tabIndex={0}
  role="button"
>

它會導致 typescript 錯誤。

如果我將event聲明為(event: MouseEvent | KeyboardEvent) ，則 typescript 會抱怨handleViewInfoClick(e)的參數類型錯誤。 如果我聲明KeyboardEvent<HTMLDivElement> ，則handleViewInfoClick(e)不會引發錯誤。 但是，typescript 抱怨Type 'KeyboardEvent<HTMLDivElement>' is not generic 。

處理這個問題的正確方法是什么？

Answer 1

使用 React 處理程序，您應該使用來自 React 的事件類型，而不是來自 DOM：

const handleViewInfoClick = (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>): void => {

你也可以使用

const handleViewInfoClick = (event: React.SyntheticEvent) => {

因為 KeyboardEvent 和 MouseEvent 都繼承自 SyntheticEvent，而您所關心的只是能夠在其上調用preventDefault ，而 SyntheticEvent 具有。