Refs ReactJS

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}>ОЧИСТИТЬ</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'));

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