带有可选参数的 React 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但是不能接受可选的Boolean。

      <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) => {

但是当您需要将 value 参数传递给 toggleValue 时，您还必须这样传递事件：

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

带有可选参数的 React Typescript OnClick

React Typescript OnClick with optional parameters

callback

onclick

typescript

reactjs

react-hooks