26 lines
1,020 B
Markdown
26 lines
1,020 B
Markdown
|
---
|
||
|
|
tags:
|
||
|
|
- javascript
|
||
|
|
- react
|
||
|
|
---
|
||
|
|
|
||
|
|
# Controlled components
|
||
|
|
|
||
|
|
Controlled components relate to how you use forms in React.
|
||
|
|
|
||
|
|
You can use standard form HTML within a React component but applying React state
|
||
|
|
to the form via controlled components gives you greater power over what you do
|
||
|
|
with the inputs and how you handle the data that is received.
|
||
|
|
|
||
|
|
Standard HTML forms have a separate state from the rest of the document object
|
||
|
|
and this is highly mutable. It can send requests to a server and reload the
|
||
|
|
page. This mutability can obviously interfere with the state you maintain in
|
||
|
|
your React components; this is why it is best to manage form state along with
|
||
|
|
React state.
|
||
|
|
|
||
|
|
We can combine the two [native HTML form state and React state] by making the
|
||
|
|
React state be the “single source of truth”. Then the React component that
|
||
|
|
renders a form also controls what happens in that form on subsequent user input.
|
||
|
|
An input form element whose value is controlled by React in this way is called a
|
||
|
|
“controlled component”.
|