Как хранить в локальном хранилище?(РЕАКТ) - PullRequest
Новая
       10

Как хранить в локальном хранилище?(РЕАКТ)

0 голосов
/ 24 октября 2018

У меня есть вопрос к вам ... В моем приложении реакции у меня есть <input></input>, но я бы хотел, чтобы пользователь мог сохранять свое сообщение благодаря локальному хранилищу. 

class Profil extends Component {
    message() {
        if (localStorage != 'undefined'){
            document.getElementById('message').value = localStorage.getItem('message');
        }
        else {
            alert("localStorage is not supported");
        }
    }
    render() {
        return (
            <div>
                <input name="message" onChange={() => this.message()}></input>
            </div>
        );
    }}

При этом, когда я помещаю письмо, у меня сразу появляется сообщение об ошибке: 

TypeError: localStorage.getItem(...) is null

, и эта строка неверна: 

document.getElementById('message').value = localStorage.getItem('message');

Что мне делать?

1 Ответ

0 голосов
/ 24 октября 2018

Вместо того, чтобы манипулировать DOM вручную, вы можете держать сообщение в состоянии и обновлять значение localStorage при каждом изменении, а также читать значение из localStorage при создании компонента.

Пример 

class Profile extends React.Component {
  constructor() {
    super();
    this.state = {
      message: localStorage.getItem("message") || ""
    };
  }

  onChange = event => {
    const message = event.target.value;

    localStorage.setItem("message", message);
    this.setState({ message });
  };

  render() {
    return <input value={this.state.message} onChange={this.onChange} />;
  }
}
...