如何访问 onClick 函数中的钩子 setter

Question

我正在将 class 组件重写为功能组件，但我不知道如何访问 onClick 函数中的挂钩 setter。

我像往常一样声明钩子，它是一个变量和一个用于访问用户名的 setter :

export function Header(props: IHeaderProps) {

    const [username, setUsername] = useState('');


    // set username in header if found in storage
    useEffect(() => {
        const token = JSON.parse(localStorage.getItem(TOKEN_NAME) || '{}');

        if(token.Username) {
        setUsername(token.Username);
        }
    });......

在 JSX 中我有一个 "Sign out" 按钮。单击时，它会调用 handleLogout 函数，我需要将用户名设置为空字符串：

    ....
    <span className="ms-Grid-col ms-u-sm4"><DefaultButton onClick={handleLogout} text="Log out" /></span>
    ....

function handleLogout() {
    ...
    // how can i set the username to empty string here?
}

但是我怎样才能做到这一点？当这是一个 class 组件时，我可以访问状态变量，使用挂钩处理这个问题的正确方法是什么？我正在使用带有 "cannot use lambda in the markup" 规则

的打字稿

Answer 1

您可以在功能组件内部声明函数，然后访问组件状态。

export function Header(props: IHeaderProps) {

    const [username, setUsername] = useState('');

    function handleLogout() {
        // handle logout logic here
        setUsername('');
    }

    // set username in header if found in storage
    useEffect(() => {
        const token = JSON.parse(localStorage.getItem(TOKEN_NAME) || '{}');

        if(token.Username) {
        setUsername(token.Username);
        }
    });......

如何访问 onClick 函数中的钩子 setter

How to access a hook setter in an onClick function

typescript

reactjs

react-hooks