Как получить доступ к установщику хуков в функции onClick - PullRequest
Новая
       10

Как получить доступ к установщику хуков в функции onClick

0 голосов
/ 24 апреля 2019

Я переписываю компонент класса в функциональный компонент, но я не могу понять, как получить доступ к установщику хука в функции 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?
}

Но как мне этого добиться?Когда это был компонент класса, у меня был доступ к переменной состояния, как правильно решить эту проблему с помощью хуков?Я использую машинопись с правилом «нельзя использовать лямбду в разметке»

1 Ответ

1 голос
/ 24 апреля 2019

Вы можете объявить функцию внутри функционального компонента и затем получить доступ к состоянию компонента. 

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