Хранение нескольких ссылок в компоненте React против запроса DOM по ID

Question

Я создаю форму в реакции и хотел бы автоматически сфокусироваться на первом недействительном поле после отправки.Для этого мне нужно получить доступ к ссылке на недопустимое поле и вызвать .focus() на нем.Мой вопрос заключается в том, что лучше (более производительно) хранить несколько ссылок в конструкторе или просто прикрепить идентификатор к каждому полю и запросить DOM, чтобы получить ссылку.

constructor(props) {
    super(props);
    this.state = this.props.entry;
    this.submitForm = this.submitForm.bind(this);
    this.field1 = React.createRef();
    this.field2 = React.createRef();
    this.field3 = React.createRef();
    this.field4 = React.createRef();
}
...

this.field3.focus();

vs.

document.getElementById(`form_${fieldId}`).focus();

По сути, не нужно ли хранить ссылку на каждый вход формы вместо того, чтобы запрашивать DOM по идентификатору один раз?

Answer 1

Если вы включаете <input> в компонент, вы можете установить одну ссылку и делегировать функциональность:

class TextInput extends React.PureComponent {
  constructor() {
    super()
    this.input = React.createRef();
  }

  focus = () => {
    this.input.current.focus()
  }

  render() {
    return(<input ref={this.input} />)
  }
}

// elsewhere...
const text_input = React.createElement(TextInput)
text_input.focus() #=> calls the `focus` method defined above