React Redux - Показать строку, сохраненную в состоянии Redux в поле ввода

Question

У меня есть поле input, в которое пользователь вводит. Это поле ввода выглядит так:

// within React component render function:
...
        <input
          id="autoComplete"
          className={inputClasses}
          type="text"
          // used to display user typed words in input field
          ref={this.inputRef}
          // onchange is used to store value in redux store
          onChange={this.inputChangeHandler}
        />

В приведенном выше коде 'ref' для отображения введенной пользователем буквы в поле ввода. Однако у меня также есть автозаполнение Google Maps, интегрированное в это поле ввода. Функция автозаполнения работает нормально, и когда пользователь нажимает на один из результатов автозаполнения, поле ввода заполняется этим именем, а обработчик onChange сохраняет значение в хранилище с избыточностью.

Пока все хорошо. Однако теперь, когда пользователь переходит к другому разделу сайта, как мне заполнить поле ввода значением в хранилище избыточности. В поле ввода нет атрибута 'value', и он использует метод React ref.

Спасибо

Answer 1

Вы можете изменить / добавить значение к элементу ввода, используя ref.ref будет в основном иметь ссылку на фактический dom-узел, поэтому, изменив this.refName.current.value, вы измените значение input.

Но вам нужно сделать это после начальной разметки, то есть после ref получить ссылку наэлемент ввода.

Проверьте этот рабочий пример:

class App extends React.Component {

  constructor() {
    super();
    this.a = React.createRef();
  }
  
  click = () => {
    this.a.current.value = Math.floor(Math.random()*100);
  }
  
  render() {
    return (
      <div>
        <input ref={this.a} placeholder="Number" />
        <button onClick={this.click}>Click here to change the input value</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='app' />