使用可选参数响应 Typescript OnClick

Question

这有一个简单的解决方法，但我是一名学生，正在尝试学习打字稿。感谢您的帮助。

我正在尝试将一些自定义挂钩转换为打字稿

import { useState } from 'react';

export default function useToggle(defaultValue: Boolean = false) {
  const [value, setValue] = useState(defaultValue);
  const toggleValue = (value?: boolean) => {
    setValue((currentValue) =>
      typeof value === 'boolean' ? value : !currentValue
    );
  };
  return [value, toggleValue] as const;
}

ToggleValue 的类型是 Boolean | 不明确的。我想将它用作 onClick 并仅发送默认切换的功能。这在不使用打字稿时有效。我认为这是因为onClick可以接受未定义但不能接受可选的布尔值。

      <button onClick={toggleValue}>toggle</button> {/* MAKE ThIS WORK? */}
      <button onClick={() => toggleValue(true)}>set True</button>
      <button onClick={() => toggleValue(false)}>set False</button>

使用 Typescript，即使不提供参数，我也需要将其编写为回调

<button onClick={()=>toggleValue()}>toggle</button> 

Answer 1

当您将函数传递给 onClick 事件时，它将始终将鼠标事件作为第一个参数传递，并且打字稿知道它，并警告您在您这样使用它时缺少该事件。

您有两种解决方案来处理此问题，第一个是您提出的解决方案：

<button onClick={()=>toggleValue()}>toggle</button> 

当没有参数传递给toggleValue 时。

否则，您可以将点击事件添加到您的toggleValue函数中：

  const toggleValue = (e: React.MouseEvent<HTMLButtonElement>, value?: boolean) => {

但是，当您需要将值参数传递给toggleValue时，您还必须按如下方式传递事件：

  <button onClick={(e) => toggleValue(e, true)}>set True</button>