函数on单击回调参数类型

Question

我从TS开始，在onClick处理程序中设置函数时遇到问题。我应该以什么方式指定类型以使其工作？

回调处理程序函数

const setSearchBarActive = () => {
setActive(true);
};

TS错误

Type 'boolean | (() => void)' is not assignable to type 'MouseEventHandler<SVGSVGElement> | undefined'.
Type 'boolean' is not assignable to type 'MouseEventHandler<SVGSVGElement>'.ts(2322)
index.d.ts(1479, 9): The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & FontAwesomeIconProps'

反应代码

export default function Searchbar() {
const { isDarkMode } = useContext(DarkModeContext);
const [active, setSearchBarActive] = useSearchbar();
return (
<SearchbarContainer isDarkMode={isDarkMode}>
<FontAwesomeIcon icon={faSearch} onClick={setSearchBarActive} />
<SearchbarInput type="text" isDarkMode={isDarkMode} />
</SearchbarContainer>
);
}

Answer 1

这应该可以解决问题，您必须确保自定义hooks的类型正确。

onClick={(e:MouseEvent)=>{setSearchBarActive()}}