时间戳

首页 > 解决方案 > 按钮 onClick 不适用于 useToggle 挂钩

javascript - 按钮 onClick 不适用于 useToggle 挂钩

问题描述

有一个按钮，单击它会切换一个值。根据这个值，按钮有一个图标或另一个图标。

这是代码：

export const useToggle = (initialState = false) => {
  const [state, setState] = useState(initialState);
  const toggle = useCallback(() => setState((state) => !state), []);
  return [state, toggle];
};


export function Sidebar({ isOpenedInitial }: SidebarProps) {
  const [isOpened, setSidebarState] = useToggle(isOpenedInitial);

  ...
  return (
    <div>
      <button onClick={setSidebarState}>{isOpened ? <OneIcon /> : <AnotherIcon />}</button>
  ...
  )
}

它可以工作，但它在 onClick 字下有一条红线，上面写着以下内容：

输入'布尔| (() => void)' 不可分配给类型 'MouseEventHandler | 不明确的'。类型 'false' 不可分配给类型 'MouseEventHandler | 不明确的'

我用谷歌搜索了这条消息，在这里找到了一个关于它的问题，其中接受的答案状态从更改onClick={setSidebarState}为onClick={() => setSidebarState}。

进行了更改，不再有警告，但按钮现在不起作用。我点击它，没有任何反应。

有任何想法吗？

标签： javascriptreactjstypescriptreact-hooksonclick

解决方案

如果将 useToggle 的返回值标记为 const，它将推断出数组第二个元素的正确类型

export const useToggle = (initialState = false) => {
  const [state, setState] = useState(initialState);
  const toggle = useCallback(() => setState((state) => !state), []);
  return [state, toggle] as const;
};

export function Sidebar() {
  const [isOpened, setSidebarState] = useToggle();

  return (
    <div>
      <button onClick={setSidebarState}>{isOpened ? ... : ...}</button>
    </div>
  );
}

推荐阅读