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 Autocomplete集成到了此输入字段中。自动完成功能可以正常工作，并且当用户单击自动完成结果之一时，输入字段将由该名称填充，并且onChange处理程序会将值存储在redux存储中。

到目前为止，太好了。但是，现在，当用户导航到站点的另一部分时，如何在redux存储中使用值填充输入字段。输入字段上没有'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' />

React Redux-在输入字段中显示以Redux状态存储的字符串

1 个答案: