TypeScript 如何覆蓋 onClick 事件簽名

Question

我有一個子組件如下

import React from 'react';

interface TodoListProps {
  items: { id: string; text: string }[];
  buttonHandler: (todoId: string) => void;
}

const TodoList: React.FC<TodoListProps> = (props) => {
  return (
    <ul>
      {props.items.map((todo) => (
        <li key={todo.id}>
          <span>{todo.text}</span>
          <button onClick={props.buttonHandler}>CLICK ME</button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

將props.buttonHandler指定為 function ，期望todoId作為參數，並且buttonHandler期望從父級傳遞下來。 我的父母正確地進行類型檢查非常有用。

現在的問題是我在這個組件上遇到了錯誤

類型 '(todoId: string) => void' 不可分配給類型 '(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void'。 參數 'todoId' 和 'event' 的類型不兼容。 類型 'MouseEvent<HTMLButtonElement, MouseEvent>' 不可分配給類型 'string'.ts(2322)

我應該如何處理問題

Answer 1

我應該如何處理問題

將正確的信息傳遞給buttonHandler 。 目前，您正在向它傳遞一個事件，而不是一個字符串。

有幾種方法可以做到這一點，例如包裝箭頭 function：

<button onClick={() => props.buttonHandler(todo.id)}>CLICK ME</button>