這有一個簡單的解決方法,但我是一名學生,正在嘗試學習打字稿。感謝您的幫助。
我正在嘗試將一些自定義掛鉤轉換為打字稿
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>
uj5u.com熱心網友回復:
當您將函式傳遞給 onClick 事件時,它將始終將滑鼠事件作為第一個引數傳遞,并且打字稿知道它并警告您在使用它時該事件丟失。
您有兩種解決方案來處理此問題,第一種是您提出的解決方案:
<button onClick={()=>toggleValue()}>toggle</button>
當沒有引數傳遞給 toggleValue。
否則,您可以將 click 事件添加到您的 toggleValue 函式:
const toggleValue = (e: React.MouseEvent<HTMLButtonElement>, value?: boolean) => {
但是,當您需要 toggleValue 的 value 引數時,您還必須像這樣傳遞事件:
<button onClick={(e) => toggleValue(e, true)}>set True</button>
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/407279.html
標籤:
上一篇:哪些Mime型別包含charset=utf-8指令?
下一篇:旋轉時剪切網格
