Не обновлять входные значения при изменении компонента - PullRequest
Новая
       28

Не обновлять входные значения при изменении компонента

0 голосов
/ 04 февраля 2019

Когда я вхожу в поля ввода и переключаюсь на другой компонент, ранее введенные значения обновляются. 

import React from "react";

const Home = () => (
  <div>
    <h2>Home</h2>
    <input type="text" />
  </div>
);

export default Home;

Как предотвратить обновление значений.

Демонстрация: https://codesandbox.io/s/jv7mk6596v

Ответы [ 3 ]

0 голосов
/ 04 февраля 2019

Здесь у вас есть неуправляемый компонент (<input>).Значение ввода сохраняется только в DOM, а когда оно отключено, оно исчезает.

Чтобы сохранить значение, нам нужно сделать его контролируемым компонентом и сохранитьЗначение входа на соответствующем уровне.Если вы хотите, чтобы он сохранялся дольше, чем экземпляр компонента Home (и при условии, что у вас есть только один компонент Home), вы можете оставить входное значение в родительском компоненте Home.Например: 

import React from "react";

const Home = (props) => (
  <div>
    <h2>Home</h2>
    <input
      type="text"
      value={props.value}
      onChange={event => props.onChange(event.target.value)}
    />
  </div>
);

class App extends React.Component {
  state = {
    home: {
      value: ""
    }
  }
  render() {
    return (
      <div>
        <Home
          value={this.state.home.value}
          onChange={value => this.setState({ home: { value } })}
        />
      </div>
    )
  }
}

Обратите внимание, что это позволяет значению сохраняться, даже если вы прекратите рендеринг компонента Home и замените его новым, именно потому, что состояние не сохраняется в компоненте Homeсам по себе.

Кроме того, в качестве альтернативы сохранению состояния в компоненте вы также можете использовать хранилище (созданное, например, с помощью Redux ), но принцип тот же: если вы хотитезначение должно сохраняться дольше, чем экземпляр компонента, затем вы должны сохранить его вне экземпляра компонента, а также вне элементов, визуализированных экземпляром компонента, как вы это сделали.Тем не менее, независимо от того, сохраняете ли вы состояние в хранилище или в более долгоживущем компоненте, это скорее деталь реализации.

Редактировать

Я посмотрел на ваш пример кода и в вашем случаевероятно, будет чище пользоваться магазином.Тем не менее, я просто покажу вам пример того, как вы можете решить это с состоянием компонента.Вот ваш проект с необходимыми изменениями: https://codesandbox.io/s/6vqz30jjon

0 голосов
/ 04 февраля 2019

Здесь - мое решение, использующее HOC и localStorage API для сохранения ваших данных.

0 голосов
/ 04 февраля 2019

Интегрированное приложение реагирования с редуксом.

Redux - это контейнер с предсказуемым состоянием для приложений JavaScript.Redux позволяет легко управлять состоянием вашего приложения

Установить соответствующие пакеты npm и перейти по этой ссылке

...