如何在 onClick 函数中访问挂钩设置器

Question

我正在将类组件重写为功能组件，但我不知道如何在 onClick 函数中访问挂钩设置器。

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

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 中，我有一个“退出”按钮。单击时，它会调用 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?
}

但我怎样才能做到这一点？当这是一个类组件时，我可以访问状态变量，使用钩子处理这个问题的正确方法是什么？我正在使用带有“不能在标记中使用 lambda”规则的打字稿

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);
        }
    });......