javascript - React＆Typescript如何从 child 到 parent 获得onClick Prop

Question

我正在使用 React 和 TypeScript。

我想知道如何使用 Prop 将事件从 parent 传递给 child 。

例子也是如此

parent.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')} /> 
   )
}

child.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 作为参数。