Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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.
Sign up