ReactJS - Refs

o ref é usado para retornar uma referência ao elemento. Refs devem ser evitados na maioria dos casos, no entanto, eles podem ser úteis quando precisamos de medições DOM ou para adicionar métodos aos componentes.

Usando Refs

O exemplo a seguir mostra como usar refs para limpar o campo de entrada. ClearInput função procura por elemento com ref = "myInput" valor, redefine o estado e adiciona foco a ele depois que o botão é clicado.

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'));

Depois que o botão é clicado, o input será limpo e focado.