React & Typescript, как получить onClick опору от ребенка к родителю

Question

Я использую реагирование и машинопись.

Интересно, как я могу передать событие от родителя ребенку с помощью реквизита?

также пример

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

В вашем дочернем объекте вы задаете обработчик нажатия типа clickHandler: () => any;, он не ожидает никаких параметров.

Но когда вы передаете функцию в родительском компоненте, вы задаете e в качестве параметра. Таким образом, они не совпадают.

Вы можете ввести свой clickHanler: clickHandler: (e: any) => any;

Но вам, вероятно, следует избегать any и попробовать: (e: React.MouseEvent) => any.

Answer 2

Вот как должны быть введены данные для обработчика щелчков:

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

Не следует использовать any в качестве типа для параметра, так как обработчик события щелчка принимает Event в качестве параметра .