使用可选参数反应 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 可以接受 undefined 但不能接受可选的布尔值。

      <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 的 value 参数时，你还必须像这样传递事件：

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