От автора: в React ref используется для возврата ссылки на элемент. Рефов следует избегать в большинстве случаев, однако они могут быть полезны, когда нам нужно внести измерения в DOM или добавить методы к компонентам.
Использование рефов
В следующем примере показано, как использовать рефы для очистки поля ввода. Функция ClearInput выполняет поиск элемента со значением ref=»myInput», сбрасывает состояние и выделяет его фокусом после нажатия кнопки.
App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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
|
1 2 3 4 5 |
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app')); |
После нажатия кнопки поле ввода будет очищено и выделено фокусом.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
