有一個按鈕，單擊它時會切換一個值。基于此值，按鈕具有圖示或其他圖示。
這是代碼：
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 | 不明確的'。型別 'false' 不能分配給型別 'MouseEventHandler | 不明確的'
我在谷歌上搜索了這條訊息，在這里找到了一個關于它的問題，其中接受的答案指出要從 更改onClick={setSidebarState}為onClick={() => setSidebarState}。
進行了更改，不再有警告，但該按鈕現在不起作用。我點擊它，沒有任何反應。
有任何想法嗎？
uj5u.com熱心網友回復：
如果將 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>
);
}
uj5u.com熱心網友回復：
現在，你需要明確地說 setSideBarState 是一個函式，所以你需要把 setSideBarState()
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/355987.html
標籤：javascript 反应 打字稿 反应钩子 点击
上一篇：單擊按鈕時如何洗掉選項