使用 TypeScript 反应事件处理程序

Question

我正在尝试将删除 function 作为道具传递给子组件。 在子组件中单击按钮时，应将 id 作为参数传递。 我不知道这个 function 的类型。 请看下面的代码：

const App: React.FC = () => {
  
  const deleteHandle = (id: string) => {
          dispatch(deleteItem(id));
  };

  return (
  <ChildComponent deleteHandle={deleteHandle}/>
  )
}

子组件：

interface ChildProps {
  deleteHandle: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

const ChildComponent = ({deleteHandle}: ChildProps) => {

  return (
<button onClick={deleteHandle('id')} >Delete<button/> 
 
)} 

deleteHandle 应该是 React.MouseEvent 并且具有 id 类型字符串。 我该怎么写这个？

Answer 1

您可以更新您的deleteHandle以接收两个 arguments，这样您就可以访问事件和您想要的任何参数。

const App: React.FC = () => {
  const deleteHandle = (e: React.MouseEvent<HTMLButtonElement>, id: string) => {
    dispatch(deleteItem(id));
  };

  return (
    <ChildComponent deleteHandle={deleteHandle}/>
  )
}


interface ChildProps {
  deleteHandle: (event: React.MouseEvent<HTMLButtonElement>, id: string) => void;
}

const ChildComponent = ({deleteHandle}: ChildProps) => {

  return (
    <button onClick={e => deleteHandle(e, 'id')} >Delete<button/> 
)}