按钮 onClick 不适用于 useToggle 挂钩

Question

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

代码如下：

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 字样下有一条红线，表示以下内容：

Type 'boolean | (() => void)' is not assignable to type 'MouseEventHandler | undefined'. Type 'false' is not assignable to type 'MouseEventHandler | undefined'

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

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

有什么想法吗？

Answer 1

现在，您需要明确说明 setSideBarState 是一个函数，因此您需要将 setSideBarState()

Answer 2

如果将 useToggle 的 return 值标记为 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>
  );
}

按钮 onClick 不适用于 useToggle 挂钩

Button onClick doesn't work with useToggle hook

javascript

onclick

typescript

reactjs

react-hooks