React Link/href 的 Typescript onclick 事件类型 - 类型“IntrinsicAttributes 和 LinkProps”上不存在属性“onClick”

Question

我只是想在 TS 中添加一个简单的点击事件。

功能

  const displayNewClaim = (event: React.MouseEvent<HTMLElement>) => {
    event.preventDefault();
  };

TS 错误

Type '{ children: string; to: string; styles: "button"; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; }' is not assignable to type 'IntrinsicAttributes & LinkProps & { children?: ReactNode; }'.
  Property 'onClick' does not exist on type 'IntrinsicAttributes & LinkProps & { children?: ReactNode; }'.  TS2322

    81 |           <input type="file" name="fileupload" /> <button>Upload CSV</button>
    82 |         </form>
  > 83 |         <Link to="/new-claim" styles="button" onClick={displayNewClaim}>
       |                                               ^
    84 |           New claim
    85 |         </Link>
    86 |       </Header>

Answer 1

在这里你可以做类似的事情

 <Link styles="button" onClick={(e) => displayNewClaim(e)}>New claim</Link>

功能

导入

import { navigate } from "gatsby"

功能

const displayNewClaim = (event: React.MouseEvent<HTMLElement>) => {
    event.preventDefault();

  navigate('/new-claim')
  };

Answer 2

别听他们的回答。你只需要确保安装了它们的类型

npm i -D @types/react

问题是 bcuz HTMLElement 没有 onClick eventHandler

const anchorTag = (e:React.MouseEvent<HTMLAnchorElement>) =>{
    e.preventDefault();
}
const buttonTag = (e:React.MouseEvent<HTMLButtonElement>) =>{
    e.preventDefault();
}

你只需要确保使用包含它的 html 标签 HTMLAnchorElement、HTMLButtonElement