javascript - 多个（动态）元素的 createRef

Question

我知道React.createRef()这很简单，要引用一些东西，只需在构造函数中声明它：

constructor(props) {
  super(props)
  this.inputRef = React.createRef()
}

然后在渲染中：

render() {
  <input ref={this.inputRef} type="text" />
}

我不知道如何在 React 版本 16 中使用 Refs 和 DOM。

我有这个列表并渲染：

<div>{arr.map(person => <div>{person.name}</div>)}

我怎样才能做到这一点？

标签： javascriptreactjsecmascript-6

Answer 1

您可以在 refs 上使用不同的名称

<input type="text" ref={this.inputField1} />
<input type="text" ref={this.inputField2} />

在您的构造函数中，您可以像这样使用 createRef ：

this.inputField1 = React.createRef();
this.inputField2 = React.createRef();

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.inputField1 = React.createRef();
    this.inputField2 = React.createRef();
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
		this.inputField1.current.value = '1'
    this.inputField2.current.value = '2'
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputField1} />
        <input type="text" ref={this.inputField2} />
        
        <button type="button" onClick={this.handleClick}>
          click me
        </button>
      </div>
    );
  }
  
}

ReactDOM.render(
  <MyComponent/>,
  document.getElementById('container')
);

<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="container">

</div>