Всем привет. В этом уроке мы разберем с вами что такое refs в React. В прошлых уроках мы разобрали с вами два типа данных в React: props и state. Нам осталось разобрать еще один тип данных в React. Это refs. Он позволяет обращатся к конкретному DOM елементу компонента.
Это полезно в нескольких случаях. Например, когда вы хотите прочитать значение елемента без React или навесить jQuery библиотеку на елемент. Или вызвать какой-то нативный метод - например focus.
Давайте попробуем. Не так давно в React изменили синтаксис работы с refs и теперь он вот такой.
Давайте создадим input и button
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<input type="text" placeholder="test" />
<button>Submit</button>
</div>
);
}
}
export default App;
Если мы посмотрим в браузер, то увидим, что наша форма отрисовалась.
Добавим атрибут onClick и прибайндим метод this.submit в нашему контексту.
Для этого навешиваем onClick евент
<button onClick={this.submit.bind(this)}>Submit</button>
и добавляем submit метод
submit() {
console.log('submit');
}
Если мы посмотрим в браузер, то наша функция submit вывела консоль лог при клике.
Теперь для того, чтобы получить значение DOM елемента input нужно навесить на него вот такую конструкцию.
<input type="text" placeholder="test" ref={(input) => this.testInput = input} />
Здесь мы указали атрибут ref, который является функцией и присваивает input в переменную this.testInput. React вызвает ref callback, когда наш компонент рендерится. Это обычный паттерн в React как получить доступ к DOM елементам.
Теперь в нашей функции submit мы можем вывести this.testInput.
submit() {
console.log('submit', this.testInput);
}
Как мы видим, в консоль нам вывелся DOM елемент. Теперь мы можем делать с ним что угодно. Например, узнать его значение в данный момент.
console.log('submit', this.testInput.value);
Если мы введем что-то в input и нажмем submit, то в консоль выведется значение input.
Ref отличный способ доступа к DOM елементам, но его нужно применять с осторожностью. Нужно помнить, что это не React way, а просто возможность доступа к DOM елементам. Всегда лучше использовать state, props если это возможно вместо refs, так как они поддерживают правильный флоу данных в приложении, а refs нет.