React JS ref — рефы

От автора: в React ref используется для возврата ссылки на элемент. Рефов следует избегать в большинстве случаев, однако они могут быть полезны, когда нам нужно внести измерения в DOM или добавить методы к компонентам.

Использование рефов

В следующем примере показано, как использовать рефы для очистки поля ввода. Функция ClearInput выполняет поиск элемента со значением ref=»myInput», сбрасывает состояние и выделяет его фокусом после нажатия кнопки.

App.jsx

import React from 'react';
import ReactDOM from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.state = { data: '' } this.updateState = this.updateState.bind(this); this.clearInput = this.clearInput.bind(this); }; updateState(e) { this.setState({data: e.target.value}); } clearInput() { this.setState({data: ''}); ReactDOM.findDOMNode(this.refs.myInput).focus(); } render() { return ( <div> <input value = {this.state.data} onChange = {this.updateState} ref = "myInput"></input> <button onClick = {this.clearInput}>CLEAR</button> <h4>{this.state.data}</h4> </div> ); }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app'));

После нажатия кнопки поле ввода будет очищено и выделено фокусом.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.