this.refs.something возвращает "неопределенный"

Question

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

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

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

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

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

Answer 1

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

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

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

ОБНОВЛЕНИЕ: также ссылки не будут работать на компонентах без сохранения состояния по ссылке выше

Answer 2

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

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

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

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

Answer 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();
 }

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

Answer 4

Вместо того, чтобы помещать Console.log в функцию example(){...} вы должны положить его внутрь:

example=()=>{....}

Answer 5

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

Answer 6

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

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