There are times in a React application where you need to reach out to individual elements and get their values. React provides us with string refs so that we can check into a value with this.refs. Eve sets this up at a basic level by logging the values of the form fields to the console. Now that you've captured values, you can pass them back up to change state.
- [Narrator] Props are typically…the only way that parents' components…can interact with their children.…When we modify a child,…you re-render it with new props.…In some cases, we want to reach…out to individual elements…to figure out what their values are.…The way that we can do this…is with refs.…So let's go ahead and open…our add day form again,…and we're going to add…all of these refs…to our input fields.…So we'll just add another…value here, ref=resort.…We're going to say ref=date.…
Then we will add ref=powder,…and finally, ref=backcountry.…Excellent.…The other things I want to do…here is let's add a button…to this form so this thing…actually works.…So we're going to add button,…and it should say Add Day.…Awesome.…So now that we have created…refs for all of our inputs,…we need to handle…the submission of this form,…or we actually need…to capture these values.…
So let's go ahead…to our component,…and we're going to add…submit as a new function.…We're going to send an e…so that we can use…e.preventDefault…to prevent the default behavior…
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Q: This course was updated on 09/19/2017. What changed?
A: The following topics were updated: setting up Chrome tools for React, inspecting React sites, Babel static transpiling with babel-cli, loading JSON with webpack, adding CSS to webpack build, and creating components with createClass(). In addition, a new video was added that covers migrating to webpack 3.
Q: This course was updated on 06/20/2018. What changed?
A: New videos were added that cover staying up to date with React and using create-react-app. In addition, the following topics were updated: creating components with createClass() and working with state.
Building a Polling App with Socket IO and React.jswith Alex Banks3h 56m Intermediate
1. What Is React.js?
2. Intro to JSX and Babel
3. React Components
4. Props and State
5. Using the React Router
6. Forms and Refs
7. The Component Lifecycle
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.