/    /  ReactJS- React Refs

React Refs

The react ref is used to return a reference to the any element. React refs should be avoided in most cases, however, they can be useful when we need DOM(Document Object Model) measurements or to add methods to the components.

 

Using Refs:

The following example shows how to use react refs to clear the html input field. ClearInput function searches for any element with ref = “myInput” value, resets the state, and adds focus to it after the button is clicked.

EXAMPLE:

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

OUTPUT:

Button is clicked, the input will be cleared and focused:

refs