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

Question

我正在将一个类组件重写为一个功能组件，但我无法弄清楚如何在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中，我有一个“退出”按钮。单击时，它会调用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”规则的typescript

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