Slide 16.15: React forms

Slide 16.14: React events
Slide 16.16: React lifecycle
Home Print version

React Forms

Just like in HTML, React uses forms to allow users to interact with the web page, and you add a form with React like any other element. Handling forms is about how you handle the data when it changes value or gets submitted. In HTML, form data is usually handled by the DOM. In React, form data is usually handled by the components. When the data is handled by the components, all the data is stored in the component state. You can control changes by adding event handlers in the onChange attribute:

<html>
 <head>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <title>React forms</title>
 </head>
 <body> 
  <div id="root">Hello, World!</div>

</body>
</html>

◀
Previous

Slide 16.14: React events
Slide 16.16: React lifecycle
Home Print version

▶
Next

Housework won’t kill you.
But then again, why take the chance?
— Phyllis Diller on housework