Open Source Your Knowledge, Become a Contributor
Technology knowledge has to be shared and made accessible for free. Join the movement.
We will now add the possibility to specify a number of items using a text input. There are two ways to create forms in React: controlled components and uncontrolled components.
Controlled components
This is the approach that React recommends, in which form data is handled by the component rather than by the DOM. The React component is the "single source of truth".
Fix the counter-form-controlled
example to use the handleChange
function when the input changes.
Note that you need to bind this.handleChange
to this
in the constructor so you can refer to the handleChange
function directly. Otherwise you would have to use onChange={event => this.handleClick(event)}
, which has the unfortunate effect of creating a different callback every time the component renders.
Uncontrolled components
When you don't need to track the state in the React component, your component is said to be uncontrolled. In this case, to access the values of your form you need to use a reference to the DOM. This is done with the special ref
attribute whose value is a callback that receives the DOM element as its argument.
Fix the uncontrolled counter code by ... + Number.parseInt