Refs and the DOM

5:13 with Guil Hernandez

Refs let you access and interact with DOM nodes created in the render() method. They make it possible to do the more traditional DOM manipulation, and they're commonly used to access form elements and get their values.

Teacher's Notes
Video Transcript
Downloads

Resources

Use refs inside a functional component:

const AddPlayerForm = ({ addPlayer }) => {

  let playerInput = React.createRef();
  let handleSubmit = (e) => {
    e.preventDefault();
    addPlayer(playerInput.current.value);
    e.currentTarget.reset();
  }

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        ref={playerInput}
        placeholder="Enter a player's name"
      />

      <input 
        type="submit" 
        value="Add Player" 
      />
    </form>
  ); 
}

In React, you typically do not target elements directly, and 0:00 modify them like you would when working with JavaScript and the DOM. 0:03 For example, JavaScript provides selector methods like get element by ID, 0:07 that return an element in the DOM. 0:11 Which you can then manipulate, get and set it's text content, and more. 0:13 To modify what a React component or 0:17 element displays on the screen, you use state and props. 0:19 You trigger a state change and re-render the component with new props. 0:23 And if it's a component with local state or 0:28 a controlled component, you'll re-render it with each update in state. 0:30 There may be times when you need a target and 0:35 modifying element outside of that typical data flow. 0:37 So React provides an escape hatch with refs. 0:39 Refs let you access and interact with DOM nodes or 0:43 React elements created in the render method. 0:46 They make it possible to let you do the more traditional DOM manipulation, and 0:48 they're commonly used to access form elements and get their values. 0:52 Earlier, you learned how to update the value of an input field using state, 0:56 by creating a controlled component or 1:00 a component with internally controlled state. 1:03 We had to write quite a bit of code just to update an access the text fields value. 1:06 For example, we created a value's state and 1:11 wrote a function to update the value state. 1:13 Then we wired the input field to the function using an onChange event. 1:16 For only one input field, writing this code is not a big deal. 1:21 And this is still the recommended React way to control form elements. 1:25 Especially if you need to validate user input in real time, or 1:29 filter results with every keystroke for example. 1:33 However, if you're building a form that does not require internal state, 1:36 you can make use of the ref attribute instead of writing an event handler for 1:41 every state update. 1:45 So let's create a ref that will access the player text field. 1:46 You create a ref using the React.createRef method, and 1:51 then you attach the ref to a react element via the ref attribute. 1:54 In the AdPlayerForm class, I'll create a ref named 1:59 playerInput with playerInput = React.createRef. 2:04 Then attach this ref to the text input in the render method, 2:11 by giving the input a ref attribute and 2:16 passing it the playerInput ref with this.playerInput. 2:19 This puts a reference to the input on the AddPlayerForm class. 2:23 When the input is rendered onto the page, 2:29 it returns the reference which you can access with this.playerInput. 2:32 For example, if I console.log this.playerInput, 2:37 it returns an object with current pointing to the input element. 2:41 In fact, it even selects and highlights the input in the browser. 2:47 So great, the ref is now referencing the input element, and 2:50 we can access it using its current property. 2:55 So in the handle submit function, instead of passing the value state to 2:58 the addPlayer callback I'll pass it the ref with this.playerInput. 3:03 And if the ref is a form element, you get the value of the ref with .current.value. 3:08 So now we can delete the state object, 3:15 because we're no longer using the value state. 3:18 That means we can also delete the handleValueChange function, 3:21 as well as the setState method inside handleSubmit. 3:24 And the onChange and value attributes from the input element. 3:28 All right, let's test it's in the browser to make sure that our 3:33 ad player functionality still works. 3:36 Type a name into the text field, submit it, and it works. 3:38 Now, the form no longer resets the text field after submitting a name, 3:42 this is a quick fix. 3:46 One way we can reset the form is by writing 3:47 e.currentTarget.reset in the handleSubmit function. 3:51 I'll submit another player, and the input once again resets on submit, good. 3:58 So as you can see, refs can provide an easier and 4:03 quicker way to get the value of an input field. 4:06 Now, when building forms, 4:09 when should you use a controlled component instead of creating refs, and vice versa? 4:11 Well, controled components have internal state and 4:16 require functions to update state. 4:19 They make it easier to modify or 4:21 validate user input or filter results based on user input in real time. 4:23 Control components with state call render on every keystroke, 4:29 where as in refs, render is only called once. 4:33 So whenever you're building a form that requires field inputs and 4:36 you don't need to keep track of every keystroke, you have the option to create 4:39 an uncontrolled component, and use refs to get the form values from the DOM. 4:43 Finally, refs are not limited to class components. 4:48 You can create and use refs inside a functional component. 4:51 In functions, you need to assign React.createRef in the ref name to 4:55 a variable, then reference that variable in the ref attribute. 5:00 I've posted a code snippet that shows the add player form component as a function 5:04 with refs, in the teacher's notes. 5:08 So, it's up to you to convert it from a class to a function. 5:10

You need to sign up for Treehouse in order to download course files.

React Components

Refs and the DOM

Resources