Hello today we continue to learn about ReactJs. And today we will talk about the form
Forms
For web applications, form is one of the indispensable components, and so is ReactJS. However, the Form in ReactJs has some differences compared to the HTML Form. With the HTML form, changing the values of the properties will be managed locally and it will be difficult for us to handle the value before changing.
Example of an HTML Form
1 2 3 4 5 6 7 8 | <span class="token operator"><</span> form <span class="token operator">></span> <span class="token operator"><</span> label <span class="token operator">></span> Name <span class="token punctuation">:</span> <span class="token operator"><</span> input type <span class="token operator">=</span> <span class="token string">"text"</span> name <span class="token operator">=</span> <span class="token string">"name"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> label <span class="token operator">></span> <span class="token operator"><</span> input type <span class="token operator">=</span> <span class="token string">"submit"</span> value <span class="token operator">=</span> <span class="token string">"Submit"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> form <span class="token operator">></span> |
This is a typical example of an HTML Form, with the main function being to move to a new page when a user submits the form. With the above structure, you can freely in ReactJS and it will work normally.
But in most cases it is convenient to have a JavaScript function that handles form submission and gives us access to the values of the form. One of the ways to do that is by using the “Controlled Components” technique.
Controlled Components
With HTML, elements like <input>
<textarea>
<select>
are the elements that are often used to change the value of a form and these changes will be updated based on the user changing the input.
Let’s talk a little bit about React State. We have local state, which allows us to initialize and store the objects needed for the component, these values are only updated via setState()
And we can combine the form and the React State to get the “Controlled component”. It can be understood as follows:
- The React Component will render the form with the controls.
- And when the user changes the value of the input, we can use
setState()
to update the component state as well
With this combination, we can easily handle the changing values, as well as when submitting the form.
For example, instead of going to a new page, we will log the changed values when submitting the form, and we will use the “Controlled component”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <span class="token keyword">class</span> <span class="token class-name">NameForm</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> value <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSubmit <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSubmit <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">handleChange</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> value <span class="token punctuation">:</span> event <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">handleSubmit</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">'A name was submitted: '</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> event <span class="token punctuation">.</span> <span class="token function">preventDefault</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> form onSubmit <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSubmit <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> label <span class="token operator">></span> Name <span class="token punctuation">:</span> <span class="token operator"><</span> input type <span class="token operator">=</span> <span class="token string">"text"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> value <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> label <span class="token operator">></span> <span class="token operator"><</span> input type <span class="token operator">=</span> <span class="token string">"submit"</span> value <span class="token operator">=</span> <span class="token string">"Submit"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> form <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
When the value
is assigned to the control in the form, the display value is always the latest value of state this.state.value
.
making the React state the source of truth
And when all the controls in the form use data from the state, what we want to do later, just take it from the state and use it, it will ensure the value in the state is the most standard value. After setting the value
control from state to update state, we will define the function to update it, in the example above is the function handleChange
, when the user takes any action to update the input, handleChange
will be run and update state, If the state is updated, the UI will also be re-rendered.
1 2 3 4 | <span class="token function">handleChange</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> value <span class="token punctuation">:</span> event <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">.</span> <span class="token function">toUpperCase</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
The textarea Tag
In html, <textarea>
is defined to handle text.
1 2 3 4 | <span class="token operator"><</span> textarea <span class="token operator">></span> Hello there <span class="token punctuation">,</span> <span class="token keyword">this</span> is some text <span class="token keyword">in</span> a text area <span class="token operator"><</span> <span class="token operator">/</span> textarea <span class="token operator">></span> |
For React, the <textarea>
tag uses attribute value
instead of its child elements.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <span class="token keyword">class</span> <span class="token class-name">EssayForm</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> value <span class="token punctuation">:</span> <span class="token string">'Please write an essay about your favorite DOM element.'</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSubmit <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSubmit <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">handleChange</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> value <span class="token punctuation">:</span> event <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">handleSubmit</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">'An essay was submitted: '</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> event <span class="token punctuation">.</span> <span class="token function">preventDefault</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> form onSubmit <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSubmit <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> label <span class="token operator">></span> Essay <span class="token punctuation">:</span> <span class="token operator"><</span> textarea value <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> value <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> label <span class="token operator">></span> <span class="token operator"><</span> input type <span class="token operator">=</span> <span class="token string">"submit"</span> value <span class="token operator">=</span> <span class="token string">"Submit"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> form <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Notice that this.state.value is initialized in the constructor, so that the text area starts off with some text in it.
One recommendation is that when using the <textarea>
tag, the initial value must be initialized.
The select Tag
In HTML, the <select>
tag will create a drop down list.
For example:
1 2 3 4 5 6 7 | <span class="token operator"><</span> select <span class="token operator">></span> <span class="token operator"><</span> option value <span class="token operator">=</span> <span class="token string">"grapefruit"</span> <span class="token operator">></span> Grapefruit <span class="token operator"><</span> <span class="token operator">/</span> option <span class="token operator">></span> <span class="token operator"><</span> option value <span class="token operator">=</span> <span class="token string">"lime"</span> <span class="token operator">></span> Lime <span class="token operator"><</span> <span class="token operator">/</span> option <span class="token operator">></span> <span class="token operator"><</span> option selected value <span class="token operator">=</span> <span class="token string">"coconut"</span> <span class="token operator">></span> Coconut <span class="token operator"><</span> <span class="token operator">/</span> option <span class="token operator">></span> <span class="token operator"><</span> option value <span class="token operator">=</span> <span class="token string">"mango"</span> <span class="token operator">></span> Mango <span class="token operator"><</span> <span class="token operator">/</span> option <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> select <span class="token operator">></span> |
As for React, it will syntax as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <span class="token keyword">class</span> <span class="token class-name">FlavorForm</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> value <span class="token punctuation">:</span> <span class="token string">'coconut'</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSubmit <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSubmit <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">handleChange</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> value <span class="token punctuation">:</span> event <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">handleSubmit</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">'Your favorite flavor is: '</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> event <span class="token punctuation">.</span> <span class="token function">preventDefault</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> form onSubmit <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSubmit <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> label <span class="token operator">></span> Pick your favorite flavor <span class="token punctuation">:</span> <span class="token operator"><</span> select value <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> value <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> option value <span class="token operator">=</span> <span class="token string">"grapefruit"</span> <span class="token operator">></span> Grapefruit <span class="token operator"><</span> <span class="token operator">/</span> option <span class="token operator">></span> <span class="token operator"><</span> option value <span class="token operator">=</span> <span class="token string">"lime"</span> <span class="token operator">></span> Lime <span class="token operator"><</span> <span class="token operator">/</span> option <span class="token operator">></span> <span class="token operator"><</span> option value <span class="token operator">=</span> <span class="token string">"coconut"</span> <span class="token operator">></span> Coconut <span class="token operator"><</span> <span class="token operator">/</span> option <span class="token operator">></span> <span class="token operator"><</span> option value <span class="token operator">=</span> <span class="token string">"mango"</span> <span class="token operator">></span> Mango <span class="token operator"><</span> <span class="token operator">/</span> option <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> select <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> label <span class="token operator">></span> <span class="token operator"><</span> input type <span class="token operator">=</span> <span class="token string">"submit"</span> value <span class="token operator">=</span> <span class="token string">"Submit"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> form <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
You can pass an array to the value
of the <select>
tag, but remember to set the multiple
attribute.
1 2 | <select multiple={true} value={['B', 'C']}> |
The difference between pure HTML and React when using the <select>
tag is as follows:
- HTML uses the
selected
attribute to determine the optionselected
, while React uses thevalue
attribute
All 3
<input type="text">
,<textarea>
, and<select>
will accept thevalue
attribute
The input file Tag
In HTML, the input tag of type="file"
will allow the user to select a file from the storage device. But its value
is read only so it will not be mentioned in today’s article
1 2 | <input type="file" /> |
Handling Multiple Inputs
From the beginning of the article, we only work with 1 form with only 1 control but in reality, when working with the form, there will certainly be a lot of control. So how can we handle that?
When we need to handle multiple controls in a form, we need to remember the following:
- Need to add
name
attribute for each control. - We can access the control via the value of
event.target.name
Examples are as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <span class="token keyword">class</span> <span class="token class-name">Reservation</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> isGoing <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> numberOfGuests <span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleInputChange <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleInputChange <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">handleInputChange</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> target <span class="token operator">=</span> event <span class="token punctuation">.</span> target <span class="token punctuation">;</span> <span class="token keyword">const</span> value <span class="token operator">=</span> target <span class="token punctuation">.</span> type <span class="token operator">===</span> <span class="token string">'checkbox'</span> <span class="token operator">?</span> target <span class="token punctuation">.</span> checked <span class="token punctuation">:</span> target <span class="token punctuation">.</span> value <span class="token punctuation">;</span> <span class="token keyword">const</span> name <span class="token operator">=</span> target <span class="token punctuation">.</span> name <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span> name <span class="token punctuation">]</span> <span class="token punctuation">:</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> form <span class="token operator">></span> <span class="token operator"><</span> label <span class="token operator">></span> Is going <span class="token punctuation">:</span> <span class="token operator"><</span> input name <span class="token operator">=</span> <span class="token string">"isGoing"</span> type <span class="token operator">=</span> <span class="token string">"checkbox"</span> checked <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> isGoing <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleInputChange <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> label <span class="token operator">></span> <span class="token operator"><</span> br <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> label <span class="token operator">></span> Number <span class="token keyword">of</span> guests <span class="token punctuation">:</span> <span class="token operator"><</span> input name <span class="token operator">=</span> <span class="token string">"numberOfGuests"</span> type <span class="token operator">=</span> <span class="token string">"number"</span> value <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> numberOfGuests <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleInputChange <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> label <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> form <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
A small note when you use the version of ES (ECMAScript). With ES6 versions, it allows you to access the key in a simple way as follows
1 2 3 4 | <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span> name <span class="token punctuation">]</span> <span class="token punctuation">:</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
As for the ES5 versions, we need to do the following:
1 2 3 4 | <span class="token keyword">var</span> partialState <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> partialState <span class="token punctuation">[</span> name <span class="token punctuation">]</span> <span class="token operator">=</span> value <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> partialState <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Controlled Input Null Value.
The simple understanding is that when we set the hard value for the input, the value of the input will not be changed by the user (the key is always not corrected).
If you want to allow users to change the value, set the value for it with Null
1 2 3 4 5 6 | ReactDOM.render(<input value="hi" />, mountNode); setTimeout(function() { ReactDOM.render(<input value={null} />, mountNode); }, 1000); |