Create a Simple Form Field in redux-form
In redux-form, the Field component is used to supply a form field and connect it to our redux store, by using the name prop. In this lesson, we are going to see how to use the component in the simplest way possible; passing a string of a form element (e.g. ‘select’, ‘input’) as the Field’s component props;
Instructor: [00:01] Let's write a form using Redux form. In our source folder, we'll create a new folder called components. Let's add a new file in here. We're going to call it registerform.js.
[00:14] Let's start writing a simple register form. Firstly, we're going to need to import React and its component class. We're also going to need field and Redux form from Redux form.
[00:31] Let's start writing the component. We're going to call it registerForm. At the moment, all we need is a render method. We're going to write a form, and there are going to be three fields inside.
[00:46] The first field is going to be a name field, and we're going to use Redux form's field component. We'll pass it a name of name, a component of input and a type of text. We need to pass in the name prop as an identifier for our field. The component prop refers to the html element.
[01:16] By passing input here as our component, we're going to render an html input element. It's going to be a text input. In our second field, we're going to have preferred formatting. We're going to use the field component again, we'll call it preference.
[01:35] This time, we're going to use a select element. Let's pass in some options to our select field. We'll have a blank option as the default. One option with the value of tabs, and one with spaces.
[01:55] In the last field, let's use a checkbox. The label can be, "Sign up to newsletter." Once again, we will use the field component. The name can be newsletter. Component will be input, but this time, the type is going to be checkbox.
[02:17] We're going to need a submit button for this form, let's set that up. Of course, we'll need to hook up the onSubmit method of our form. OnSubmit, we're going to pass in a method, handleSubmit. That's going to come from props.
[02:38] Let's destructure that now. We need to decorate this component using our Redux form decorator. Underneath the component, we can say registerForm = Redux form. Inside the object that we pass to Redux form, we need to pass a form name.
[03:00] Let's call this one register. That's going to decorate our registerForm component. Now, we'll need to export this wrapped component. Let's hook this component up to our source/app.js file.
[03:18] We'll need React and React.component. We'll need to import the register form that we just wrote. This component is going to act as a container for our form, we'll call it registerFormContainer.
[03:38] The render method is simply going to return registerForm, and we pass it an onSubmit method, this.submit. Let's write that submit method now. The submit method can be a narrow function, which takes a value's argument.
[03:58] We're just going to alert whichever values we get back from the form. We're going to use JSON stringify, passing in values. We'll indent each line with four spaces. Let's export the component.
[04:18] Let's save everything now, and we'll open our terminal and run onStart. Here, we have our form. Let's test it to make sure it works. Here's our alert returning the values. Let's open up our dev tools, and we'll head to the Redux pane.
[04:41] We can see here that there are many events that have occurred to our form that have been tracked automatically for us in Redux form. For example, these focus events have fired every time we focused a field. An onChange event is fired every time a field is changed. If we look at the Redux state, we can see that all of our form values are stored.