Using Refs in React

Refs in React

Notes from this video:

Using Refs in React YouTube Video

"Refs" are a way in React for you to have access to the underlying DOM element. i.e. accessing values inside of a form.

Rudimentary Ref example, String Ref

Here, we pass "first" into the input's 'ref' property which gives us access to if via this.refs.FIRST

This is Discouraged

class CreateRefExample extends React.Component {

  handleSubmit = e => {
    e.preventDefault();
    console.log('\n', 'this.refs.first', '\n', this.refs.first )
    console.log('\n', 'this.refs.first.value', '\n', this.refs.first.value )
  }

  render() {
    return (
      <form onSubmit={ e => this.handleSubmit(e)} >
        <input ref="first" type="text" defaultValue="createRef" />
        <button>Submit</button>
      </form>
    );
  }
}

INPUT REF EXAMPLE

  • STEP-1: Create a class variable and assign createRef() to it.
  • STEP-2: Pass class variable to input's ref property. Since our var inputRef is a class variable, it is bound to 'this' and is accessed via this.inputRef
  • STEP-3: We can now access the value, among other things, on the input via 'this.inputRef.current.value'
class CreateRefExample extends React.Component {
  // createRef() returns an object that exposes a property called current,
  // which when assigned to a ref will contain a reference to the DOM element.

  inputRef = createRef(); // STEP-1
  // which is the same as
  // constructor() {
  //   this.inputRef = React.createRef()
  // }

  render() {
    return (
      <form
        onSubmit={e => {
          e.preventDefault();
          // STEP-3
          alert(this.inputRef.current.value);
        }}
      >
        {/* STEP-2 */}
        <input ref={this.inputRef} type="text" defaultValue="createRef" />
        <button>Submit</button>
      </form>
    );
  }
}

Refs with useRef

The latest way to get access to a DOM element ref is with the useRef hook introduced in React 16.7.
function UseRefExample() {
  const inputRef = useRef();

  return (
    <form
      onSubmit={e => {
        e.preventDefault();
        alert(inputRef.current.value);
      }}
    >
      <input ref={inputRef} type="text" defaultValue="useRef" />
      <button>Submit</button>
    </form>
  );
}

Full Example

import React, { createRef, useRef } from "react";

// This is the OLD, OLD way.
class CallbackRefExample extends React.Component {
  render() {
    return (
      <form
        onSubmit={e => {
          e.preventDefault();
          alert(this.inputRef.value);
        }}
      >
        <input
          type="text"
          defaultValue="callback"
          ref={input => {
            this.inputRef = input;
          }}
        />
        <button>Submit</button>
      </form>
    );
  }
}

// THIS IS THE NEW-ISH WAY
import React, { createRef } from 'react';

export default class MyComponent extends React.Component {

  inputRef = createRef();

  handleSubmit = e => {
    e.preventDefault();
    console.log('\n', 'this.inputRef.current', '\n', '\n', this.inputRef.current )
  }

  render() {
    return (
      <form onSubmit={ e => this.handleSubmit(e) }>
        <input ref={this.inputRef} type="text" defaultValue="createRef" />
        <button>Submit</button>
      </form>
    );
  }
}


// THIS IS THE NEWEST WAY
function UseRefExample() {
  const inputRef = useRef();

  return (
    <form
      onSubmit={e => {
        e.preventDefault();
        alert(inputRef.current.value);
      }}
    >
      <input ref={inputRef} type="text" defaultValue="useRef" />
      <button>Submit</button>
    </form>
  );
}

export default function App() {
  return (
    <div>
      <CallbackRefExample />
      <CreateRefExample />
      <UseRefExample />
    </div>
  );
}
arrow_back

Previous

Type-GraphQL

Next

AWS S3 Buckets
arrow_forward