按钮 onClick 不适用于 useToggle 挂钩答案

【问题标题】：Button onClick doesn't work with useToggle hook按钮 onClick 不适用于 useToggle 挂钩
【发布时间】：2021-12-23 23:48:53
【问题描述】：

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

代码如下：

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 | 未定义'

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

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

有什么想法吗？

【问题讨论】：

在您的 onClick 中，您缺少括号：onClick={() => setSidebarState()}
@PradipDhakal 我试过这样，它说：这个表达式是不可调用的。并非所有类型为 'boolean | (() => void)' 是可调用的。类型“false”没有调用签名。
你在用打字稿吗？
他正在使用打字稿
那么@jkaczmarkiewicz 解决方案应该适合你。

标签： javascript reactjs typescript react-hooks onclick

【解决方案1】：

现在，你需要明确地说 setSideBarState 是一个函数，所以你需要把 setSideBarState()

【讨论】：

你的意思是onClick={setSidebarState()}？
不，onClick={() => setSidebarState()}，使用箭头函数。
我试过这样并且有这个错误信息：这个表达式是不可调用的。并非所有类型为 'boolean | (() => void)' 是可调用的。类型“false”没有调用签名。
?，等等，我在找。
您需要使用“useToggle”还是只是想了解一下？

【解决方案2】：

如果将 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>
  );
}

【讨论】：