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

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

1 个答案: