In this video about stateless components, you can handle refs with callback refs. These are callback functions that pass back the values of the elements so they can be used elsewhere. Eve sets up the refs as variables to be able to have access to them within the scope of the add day form. Refs aren't used in every app, but they are particularly useful in forms.
- [Instructor] As I've mentioned before…with stateless functional components,…we don't have access to the This keyword.…So how can we use refs with stateless components…if we get their values with this .refs.value?…Well, we can actually use callback functions…as refs to capture the values that we need…from all of our input fields.…So the first thing we're going to do here…is re-factor our AddDayForm as a stateless component,…and then we're going to add those callback refs…to each field.…So let's go ahead and export const AddDayForm,…and this is going to be set equal to a component here,…and I'm going to wrap everything in these curly braces.…
Now, inside of our component,…we're going to render or return all of these values,…so let's go ahead and grab all of our jsx tags,…everything between the parentheses.…Alright, so we have our const setup there,…we also have our return, and everything is encapsulated.…Awesome, so our render is all done,…and I'll get rid of all of that.…Now let's also grab our submit function,…
- 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
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
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
Next steps1m 4s
- 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.