Table Of Content

ReactJS Refs Tutorial

View more Tutorials:

1- React Refs

In  ReactJS, refs are used as reference to an element for you. Basically, it is advisable to avoid using the  refs in most cases. However, it is useful when you want to access the DOM nodes or elements created in the render() method.
Note: In this lesson, I will create  Refs by the style of  ReactJS, version 16.3, because it is easier for use.

React.createRef()

Use the React.createRef() method to create  Refs, and then attach them to the elements (created in  render() ) through the  ref property.
class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef} />;
  }

}
When a Ref is attached to an element create in the  render() method, you may refer to the Node object of this element through the current property of the  Ref.
const node = this.myRef.current;

Example:

refs-example.jsx
//
class SearchBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchText: "reactjs"
    };
    this.searchFieldRef = React.createRef();
  }

  clearAndFocus() {
    this.setState({ searchText: "" });
    // Focus to Input Field.
    this.searchFieldRef.current.focus();
    this.searchFieldRef.current.style.background = "#e8f8f5";
  }

  changeSearchText(event) {
    var v = event.target.value;
    this.setState((prevState, props) => {
      return {
        searchText: v
      };
    });
  }

  render() {
    return (
      <div className="search-box">
        <input
          value={this.state.searchText}
          ref={this.searchFieldRef}
          onChange={event => this.changeSearchText(event)}
        />
        <button onClick={() => this.clearAndFocus()}>Clear And Focus</button>
        
        <a href="">Reset</a>
      </div>
    );
  }
}

// Render
ReactDOM.render(<SearchBox />, document.getElementById("searchbox1"));
refs-example.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>ReactJS Refs</title>
      <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

      <style>
         .search-box  {
         border:1px solid #cbbfab;
         padding: 5px;
         margin: 5px;
         }
      </style>
   </head>
   <body>
      <h3>React Refs:</h3>

      <div id="searchbox1"></div>      

      <script src="refs-example.jsx" type="text/babel"></script>
   </body>
</html>

2- Callback Refs (TODO)

View more Tutorials: