如何为React中的handleRowClick事件函数添加类型定义

你用React.ChangeEvent<HTMLElement>作为handleRowClick的类型完全搞错了方向——ChangeEvent是用来描述输入框这类元素的变更事件对象的类型，本身不是可调用的函数，自然会报“无法调用”的错误。

正确的做法是根据你调用handleRowClick的方式，给它定义接收string类型参数的函数类型：

方式1：直接在FC的泛型参数里定义 #

const DataTableBody: FC<{ 
  rows: Array<DataTableRow>, 
  handleRowClick: (rowId: string) => void 
}> = ({ rows, handleRowClick }) => {
    return (
        <TableBody>
            {rows.map(row => (
                <TableRow key={row.id} onClick={() => handleRowClick(row.id)}>
                    {row.cells.map(({ id, value }) => (
                        <DataTableBodyCell key={id} value={value} />
                    ))}
                </TableRow>
            ))}
        </TableBody>
    );
};

方式2：先定义Props类型（更清晰，适合复杂组件） #

type DataTableBodyProps = {
  rows: Array<DataTableRow>;
  handleRowClick: (rowId: string) => void;
};

const DataTableBody: FC<DataTableBodyProps> = ({ rows, handleRowClick }) => {
    // 组件内容不变
};

如果你的handleRowClick函数需要返回特定值，把void换成对应的返回类型即可；要是row.id不是string类型，记得同步调整参数的类型。

内容的提问来源于stack exchange，提问作者Max