createRef для нескольких (динамических) элементов

Question

Я знаю, React.createRef() просто, чтобы ссылаться на что-то, просто объявите это в конструкторе:

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

Затем в рендере:

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

Я не знаю, как работать с Refs и DOM в React версии 16.

У меня есть этот список и рендер:

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

Как мне этого добиться?

Answer 1

Вы можете использовать разные имена в своих ссылках

<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>