Refs ReactJS

refUsado para retornar a referência ao elemento.RefsNa maioria das vezes, deve-se evitar usá-las, mas, quando precisamos de medições de DOM ou adicionar métodos ao componente, elas podem ser úteis.

Uso de Refs

O exemplo a seguir mostra como usar referências para limpar o campo de entrada.ClearInputUso de funçõesref = "myInput"Procurar elementos, resetar o estado e adicionar foco ao clicar no botão.

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}>LIMPAR</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'));

Ao pressionar o botão, o campo de entrada será limpo e o foco será transferido.