This.refs.something возвращает "undefined"

У меня есть элемент с ref, который определен и заканчивается тем, что отображается на странице:

    <div ref="russian" ...>
       ...
    </div>

Я хочу получить доступ к свойствам элемента DOM, например offset... или что-то еще. Тем не менее, я продолжаю получать undefined, и у меня нет ни малейшего понятия, почему. После некоторого поиска ясно, что refs применимы только к одному файлу, но я не использую его нигде, кроме этой одной страницы. Я говорю это, чтобы зарегистрировать его:

console.log('REFS', this.refs.russian);

Что может быть причиной этого?

Ответы

Ответ 1

Правильное место для работы с refs находится внутри определенных жизненных циклов React, например. ComponentDidMount, ComponentDidUpdate

Вы не можете ссылаться на refs на метод render(). Подробнее о предупреждениях о работе с refs здесь.

Если вы переместите свой вызов console.log('REFS', this.refs.russian); в методы ComponentDidMount или ComponentDidUpdate жизненного цикла (если вы на React >= 14), вы не должны получить undefined в результате.

UPDATE: также refs не будет работать с компонентами без состояния на ссылку с предупреждением выше

Ответ 2

Убедитесь, что вы не обращаетесь к ref до монтирования дочернего компонента. Например, это не работает в componentWillMount. Другой шаблон, который автоматически вызывает связанный с ref обратный вызов после монтирования элемента: this-

<div ref={(elem)=>(console.log(elem))}/>

Вы можете использовать это обозначение, чтобы получить смонтированные элементы в глубокой вложенности -

<div ref={this.props.onMounted}/>

Ответ 3

Обновление с версии 16.4 React

В вашем методе конструктора определите ваш реф как

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

В вашем рендере, где вы используете ref сделайте это.

<input
  name="russian"
  ref={this.russian} // Proper way to assign ref in react ver 16.4
/>

Например, если вы хотите иметь фокус, когда компонент монтирует это сделать

componentDidMount() {
  console.log(this.russian); 
  this.russian.current.focus();
 }

Ссылка Ссылка Документация Реакция

Ответ 4

У меня была похожая проблема в моих методах проверки формы, пытаясь назначить this.ref.current.reportValidity()

Написание метода, в котором я делал это как validate =() => {} вместо validate() {} помогло мне, но я не совсем уверен, почему именно, просто то, что я вспомнил из привычек, которые у меня были в моей прошлой работе опыт, который дал мне это. Надеюсь, это поможет, и кто-то может прояснить этот ответ, объяснив, почему это может сработать.

Ответ 5

Если вы экспортируете класс с помощью Style, пожалуйста, удалите и экспортируйте по умолчанию.