React 和 TypeScript：如何将参数传递给类型为 MouseEventHandler 的事件处理程序

Question

如何定义事件处理程序：handleStatus类型：MouseEventHandler以便我可以将类型：的附加参数传递Todo给函数？

interface TodoProps {
  todos: Array<Todos>        
  handleStatus: MouseEventHandler,
  index: number,
  className: string
}
    
export const Todo: FunctionComponent<TodoProps> = ({ todos, handleDeleteTodo, handleStatus, index, className }): ReactElement => {
  const d_todo: Todos = todos[index];
  return(
    <> 
      <div className= { className } key={ todos[index].id.toString() }>
        {todos[index].describtion}
        <Button lable='' disabled= { false } onClick= { () => handleStatus(todos[index])  }  />
      </div>
    </>
  );
}

我收到错误：

ERROR in src/components/Todo.tsx:29:84
TS2345: Argument of type 'Todos' is not assignable to parameter of type 'MouseEvent<Element, MouseEvent>'.
  Type 'Todos' is missing the following properties from type 'MouseEvent<Element, MouseEvent>': altKey, button, buttons, clientX, and 29 more.
    27 |             <div className= { className } key={ todos[index].id.toString() }>
    28 |                 {todos[index].describtion}
  > 29 |                 <Button lable='' disabled= { false } onClick= { () => handleStatus(todos[index])  }  />
       |                                                                                    ^^^^^^^^^^^^
    30 |                 
    31 |             </div>
    32 |         </>

Answer 1

如果您需要传递两个事件MouseEvent，Todo那么您需要声明handleStatus为接受事件和 a 的函数Todo：

handleStatus: (event: MouseEvent, todo: Todo) => void

然后在组件中：

onClick={(event) => handleStatus(event, todos[index])}