[React] Reference a node using createRef() in React 16.3

Posted 2020-10-29 Answer1215

In this lesson, we look at where we came from with refs in React. Starting with the deprecated string ref pattern, callback refs, and then how to use the new createRef() method in React 16.3.

Additional Resources: refs and the dom

 

You can use ‘React.createRef()‘ to create a ref object. Then to access it from <obj>.current.<ref_name>

import React from "react";
import { render } from "react-dom";

class App extends React.Component {
  fullName = React.createRef();

  handleBlur = () => {
    this.fullName.current.blur();
  };

  handleFocus = () => {
    this.fullName.current.focus();
  };

  render() {
    return (
      <div className="section">
        <div className="field">
          <label className="label">Full Name</label>
          <div className="control">
            <input className="input" ref={this.fullName} type="text" />
          </div>
        </div>
        <button
          className="button is-link is-outlined"
          onClick={this.handleFocus}
        >
          Focus
        </button>{" "}
        <button
          className="button is-danger is-outlined"
          onClick={this.handleBlur}
        >
          Blur
        </button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));