Controlled Forms

Loading...

來自 The Hong Kong University of Science and Technology 的課程

Front-End Web Development with React

140 個評分

The Hong Kong University of Science and Technology

Front-End Web Development with React

140 個評分

課程 2（共 4 門，Specialization Full-Stack Web Development with React）

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

從本節課中

React Forms, Flow Architecture and Introduction to Redux

In this module you will be introduced to uncontrolled and controlled forms and briefly examine form validation in React applications. You will get an overview of the Flux architecture and introduced to Redux as a way of realizing the flux architecture

Controlled Forms5:47

Exercise (Video): Controlled Forms35:42

Exercise (Video): Controlled Form Validation23:46

與講師見面

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Forms are a standard way of seeking user input.

In this lesson, we will explore control forms.

A way of setting up forms in your React Application whereby your form information

is directly tied into the state of your React component that is hosting the form.

So, any changes that you make to your form imports will be immediately

reflected into the state of your React component and so,

the state of the form,

or the information that the form is always reflected in

that state of the React component can't be retrieved from there.

Similarly, you can also do form validation to

ensure that the information being submitted is within reasonable limits.

So we'll do the client site form validation in this lesson.

Let's learn a little more about control forms.

As I mentioned, forms are

a very standard approach for users to input data for your application.

So it provides a cohesive and effective,

and a compelling way of inputting data into your application.

And so, as we see HTML supports forms in various ways,

forms are extensively used on many websites.

When you log into any website for example,

typically they will pop up a form for you where you

fill in your username and password to log into their website.

Maybe you're submitting some information to your website,

maybe you are submitting a feedback to a place,

maybe you're reserving a table at a restaurant.

All these can be easily supported through the use of forms.

Support for forms is already built-in to HTML.

So as you realize, in HTML,

you can easily create a form wherever you want in your html page by using the form tag.

And inside the form tag,

you will include various form elements.

The input form element allows us to create

the input boxes in the form where you can fill in information.

The input type could be of the type text, password, submit,

radio button, checkbox, email,

telephone number, date and time, and many more.

Similarly, you have text area which will give you a number of rows,

within a box allowing you to type in a long message.

You have buttons which allow you to submit the forms,

and then you have select,

which gives you options from which you can select one of the options.

So, how do these form elements from HTML forms?

How do they interact with your React Application or in other words,

how does your React Application get input from the forms and then make use of it?

Before we understand that part,

they have to realize that,

every one of these form elements in HTML maintain their own state within DOM.

And then they will update it based on user input.

So in a text box for example,

if you're typing value,

that input value that you type in will be retained in the DOM by that input box.

Now, we want to be able to connect that into our React components state,

so that any changes to a box will be immediately reflected into React component state.

Similarly, from the state,

we can set the initial value for any of these form elements.

So, how do we do this?

This is where the user control components in React come to aid.

So, what is a Controlled Component?

Controlled component makes the React component itself control the form that it renders.

So when you include the form into the view of a React component,

then you can easily tie in the React component state to the form,

so that it will become the single source of truth.

So the form information,

whatever is the state of form will reflected into the state of the React component,

so the form state and the components state will be match with each other.

And this kind of implementation is what is referred to as a control component in React.

Now, with the control component, every state mutation,

anytime you change any of the state,

it will have to be reflected into the state of your React component.

So you need appropriate handler functions that will enable change.

So for example, if there is any change in a box,

then that change should be immediately reflective to the state of your React component.

Similarly, when the user clicks on the submit button,

the submitted value should be captured inside your React component and

thereafter can be processed as required by your React Application.

So all this requires implementation of handler functions.

So how do we achieve all of this?

Now, this is what we will explore with

an example in the exercise that follows this lecture.

You will see how we can tie in

the form state to the state of the component to create a controlled form,

and then be able to take

the inputs and then modify the state as the form state has been changed.

Modify the state of the React Application,

and similarly, handle the submission of the forms.

Also in the second exercise,

we will do some form validation.

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2018 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取