Нередко пользователи приходят на сайт не в первый раз. В таком случае можно заполнить поля формы данными пользователя, для его удобства. В рамках задачи реализуйте сохранение поля login в lo

Вопрос пользователя:

Нередко пользователи приходят на сайт не в первый раз. В таком случае можно заполнить поля формы данными пользователя, для его удобства. В рамках задачи реализуйте сохранение поля login в localStorage в ключ login при сабмите формы. При первом рендере проставляйте это значение в инпут, чтобы пользователю не приходилось вводить свой логин каждый раз. import React, {useState} from "react"; export const App = () => { const [login, setLogin] = useState(''); const [password, setPassword] = useState(''); const onChangeLogin: React.ReactEventHandler<HTMLInputElement> = (e) => { setLogin(e.currentTarget.value); }; const onChangePassword: React.ReactEventHandler<HTMLInputElement> = (e) => { setPassword(e.currentTarget.value); }; const onSubmit: React.ReactEventHandler<HTMLFormElement> = (e) => { e.preventDefault(); }; return <main className="container small"> <form onSubmit={onSubmit} className="column"> <label> <span>Логин</span> <input type="text" onChange={onChangeLogin} value={login} /> </label> <label> <span>Пароль</span> <input type="password" onChange={onChangePassword} value={password} /> </label> <button>Отправить</button> </form> </main> }; Чтобы в первом рендере проставить значение, укажите значение из localStorage в качестве initialState для хука useState.

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

import React, {useState, useEffect} from "react";

export const App = () => { const [login, setLogin] = useState(localStorage.getItem('login') || ''); const [password, setPassword] = useState('');

const onChangeLogin = (e) => {
    setLogin(e.currentTarget.value);
};
const onChangePassword = (e) => {
    setPassword(e.currentTarget.value);
};

const onSubmit = (e) => {
    e.preventDefault();
    localStorage.setItem('login', login);
};

useEffect(() => {
    const savedLogin = localStorage.getItem('login');
    if (savedLogin) {
        setLogin(savedLogin);
    }
}, []);

return <main className="container small">
    <form onSubmit={onSubmit} className="column">
        <label>
            <span>Логин</span>
            <input type="text" onChange={onChangeLogin} value={login} />
        </label>
        <label>
            <span>Пароль</span>
            <input type="password" onChange={onChangePassword} value={password} />
        </label>
        <button>Отправить</button>
    </form>
</main>;

};

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: