【问题标题】:TypeScript React Js, Type 'void' is not assignable to type '((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined'TypeScript React Js,类型 'void' 不可分配给类型 '((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) |不明确的'
【发布时间】:2020-08-16 09:04:59
【问题描述】:

我有这个函数和这个类型:

type ClickHandler = (tag: ITag) => void;

type ShowHideDropItem = (tag: ITag) => void;

我的 tsx:

  const [menuItems, setMenuItems] = useState<ITag[]>(SideBarTags);

  const clickHandler: ClickHandler = (tag) => () => {
    showHideDropItem(tag);
  };

  const showHideDropItem: ShowHideDropItem = (tag) => {
    setMenuItems((items) =>
      items.map((item) => ({
        ...item,
        Active:
          item.Name === tag.Name ? (tag.Active === true ? false : true) : false,
      }))
    );
  };

但我的 onClick 出现此错误:

类型 'void' 不能分配给类型 '((event: 鼠标事件)=> 无效)|不明确的'。 TS2322

【问题讨论】:

    标签: reactjs typescript


    【解决方案1】:

    clickHandler 是一个 curried 函数(一个返回函数的函数)。考虑将它包含在您的类型中:

    type ClickHandler = (tag: ITag) => (e: React.MouseEvent) => void;
    

    注意e (event) 参数的需要取决于您是否要在函数中使用它。

    编辑:您的函数如下所示:

    const clickHandler: ClickHandler = (tag) => (e) => {
       e.preventDefault();
       showHideDropItem(tag);
    };
    

    【讨论】:

    • 您好,谢谢,我应该改变我的类型才能在我的函数中使用我的 event.preventdefault?
    • @gabriel 只需记住从“react”导入MouseEvent 或直接使用React.MouseEvent。然后,使用e.preventDefault();
    • 您能否通过发送事件向我展示我的类型和 onclick 的外观?我测试过,但不能:(
    • @gabriel 更新了我的答案
    • 我没有删除它正在等待标记它的最短时间,非常感谢@kind用户的帮助
    猜你喜欢
    • 2020-04-26
    • 2019-06-29
    • 2019-01-29
    • 1970-01-01
    • 2020-11-30
    • 2020-07-29
    • 1970-01-01
    • 2019-06-07
    • 2019-07-14
    相关资源
    最近更新 更多