Не получается сохранить данные которые получаю с input в localStorage в jsx формате

Question

Пытаюсь понять как сохранять данные полученные из input в localStorage, код пишу на реакте и мои попытки это сделать не получились. При использовании обычного javascript всегда это получалось , а никак не могу понять как данные полученные из input, а точнее текст который я ввожу при авторизации сохранялся в localSorage без использования события submit кнопке, а просто при написании, то есть при событии onChange, вот код:

export default function FORM({header, button, linkText, linkTo, value}) {
  return (
    <form className='field' id='form'>
      <fieldset className='field__border'>
        <div className='field__border_a'>
          <Link to={linkTo} className='field__border_a_a' href="">{linkText}</Link>
        </div>
        <div className='field__border_login'>
          <h1 className='field__border_title'>{header}</h1>
          <legend>Логин</legend>
          <input className='field__border_input' type="text" id='name' value={value}/>
          <legend>Пароль</legend>
          <input className='field__border_input' type="password" id='password' value={value}/>
        </div>
        <div className='field__border_check'>
          <input type="checkbox" />
          <span>Я согласен на обработку своих данных</span>
        </div>
        <Link to={"/"} className='field__border_button'>
          {button}
        </Link>
      </fieldset>
    </form>
  )
}

Answer 1

Чтобы сохранять данные из полей ввода (input) в localStorage при изменении (событии onChange), вы можете использовать состояния (state) и обработчики событий в вашем компоненте. Вот пример того, как это можно сделать с использованием функциональных компонентов и хуков:

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

export default function FORM({ header, button, linkText, linkTo, value }) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const handleUsernameChange = (event) => {
setUsername(event.target.value);
localStorage.setItem('username', event.target.value);
};

const handlePasswordChange = (event) => {
setPassword(event.target.value);
localStorage.setItem('password', event.target.value);
};

return (
<form className="field" id="form">
  <fieldset className="field__border">
    {/* ... */}
    <div className="field__border_login">
      <h1 className="field__border_title">{header}</h1>
      <legend>Логин</legend>
      <input
        className="field__border_input"
        type="text"
        id="name"
        value={username}
        onChange={handleUsernameChange}
      />
      <legend>Пароль</legend>
      <input
        className="field__border_input"
        type="password"
        id="password"
        value={password}
        onChange={handlePasswordChange}
      />
    </div>
    {/* ... */}
  </fieldset>
</form>
);
}

В этом примере мы используем хук useState для создания состояний username и password. Затем создаем обработчики handleUsernameChange и handlePasswordChange, которые вызываются при изменении соответствующих полей ввода. В обработчиках мы обновляем значения состояний и сохраняем их в localStorage

БЛОГ НА HUSL

Не получается сохранить данные которые получаю с input в localStorage в jsx формате

Ответы (1 шт):