refs

Objectives

  • Define a ref in react

  • Use a ref on an uncontrolled input component

refs

A direct reference to

a DOM element

Use Cases

From React Docs

  • Managing focus, text selection, or media playback

  • Triggering imperative animations

  • Integrating with third-party DOM libraries

Warning!

Do not use refs when the job can be done with React

You should not need direct DOM access for most tasks

ref Example

<form onSubmit={(e) => {
  e.preventDefault();
  // access to the form value:
  console.log(this.inputText.value);
}}>
  <input
     type="text"
     ref={(input) => this.inputText = input}
  />
</form>