时间戳

首页 > 解决方案 > React Typescript 如何在鼠标输入上工作

reactjs - React Typescript 如何在鼠标输入上工作

问题描述

我有一个组件，例如：

const Componen: FC<Props> = ({}) => {

   const [title, setTitle] = React.useState("");

   return (
     <ChildComponent onMouseEnter={() => setTitle("some title")} />
     {title}
   )
}

我已经为此事件定义了 ChildComponent 的类型。

type ChildProps = {
  onMouseEnter?: () => void;
};

但什么也没发生。所以onMouseEntersetTitleChildComponent不起作用

标签： reactjstypescript

解决方案

onMouseEnter不是eventHandler这里，而只是一个道具ChildComponent，它需要由 the 使用ChildComponent并传递给包装 div

const Componen: FC<Props> = ({}) => {

   const [title, setTitle] = React.useState("");

   return (
     <ChildComponent onMouseEnter={() => setTitle("some title")} />
     {title}
   )
}

const ChildComponent: FC<Props> = ({ onMouseEnter }) => (
   <div onMouseEnter={onMouseEnter}>
       {/* rest of code */}
   </div>
)

推荐阅读