React & Typescript 如何从子级到父级获取 onClick 属性

Question

我正在使用反应和打字稿。

我想知道如何使用道具将事件从父母传递给孩子。

例子也是如此

父级.tsx

const ParentComponent: React.FC<ParentProps> = (props) =>  {
   const [activeItem, setActiveItem] = useState("");

   const getActiveItem = (e: React.MouseEvent, title: string) => {
      setActiveItem(title)
   };

   return (
      <ChildComponent activeItem={activeItem} clickHandler={(e) => getActiveItem(e, 'TITLE')} /> 
   )
}

孩子.tsx

interface ChildProps {
  activeItem: string;
  clickHandler: () => any;
}


const ChildComponent: React.FC<ChildProps> = (props) =>  {
   return (
      <button onClick={props.clickHandler} /> {props.activeItem} </button>
   )
}

在父组件上，我在 clickHandler 上遇到错误：

Type '(e: any) => void' is not assignable to type '() => void'.ts(2322)

Answer 1

单击处理程序的输入应如下所示：

interface ChildProps {
  activeItem: string;
  clickHandler: (e:  React.MouseEvent<HTMLButtonElement>) => void;
}

您不应该使用any作为参数的类型，因为单击事件处理程序接受Event作为参数。