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>