TypeScript / React - 尝试创建我自己的按钮问题 - 函数签名问题答案

【问题标题】：TypeScript / React - Trying to Create My Own Button Issue - Function Signature ProblemTypeScript / React - 尝试创建我自己的按钮问题 - 函数签名问题
【发布时间】：2022-10-07 22:15:35
【问题描述】：

我正在尝试在 React / TypeScript 中创建一个简单的按钮。

我不确定我从哪里得到这个不正确的语法。

编辑似乎不喜欢我签名中的“=> void”部分。

我的目标是能够从任何父组件传递“清除状态”类型的处理程序。

import React from 'react';
import ClearIcon from '@material-ui/icons/Clear';

// problem is on this line
export function ClearButton(props: {onClick: (React.ChangeEvent<HTMLInputElement>) => void}) {
  return (<span
            onClick={(e) => { props.onClick(e) }}>
    <ClearIcon /></span>);
}

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

我相信您忘记了函数参数的名称。
即 - onClick: (e: React.ChangeEvent<HTMLInputElement>) => void

所以它变成：

export function ClearButton(props: {onClick: (e: React.ChangeEvent<HTMLInputElement>) => void}) {
  return (<span
            onClick={(e) => { props.onClick(e) }}>
    <ClearIcon /></span>);
}

【讨论】：

谢谢。需要更多的咖啡数据！