The difference between react controlled components and uncontrolled components: 1. Controlled components depend on state, while uncontrolled components are not controlled by state; 2. Controlled components can only inherit "React.Component" Only inheritance can have state, while uncontrolled components do not have state only through inheritance; 3. Controlled components are generally used when initial values need to be dynamically set, and uncontrolled components are generally used when there is no dynamic initial value information.
The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.
The difference between the two
1. Controlled components
The controlled component depends on the state
The modification of the controlled component will be mapped to the state value in real time. At this time, the input content can be verified
The controlled component only has Only by inheriting React.Component can there be state
Controlled components must use the onChange event on the form to bind the corresponding event
2. Uncontrolled components
Non Controlled components are not controlled by state
Getting data from uncontrolled components is equivalent to operating DOM
Uncontrolled components can be easily combined with third-party components, and it is easier to integrate React and Non-React code
Choose controlled or uncontrolled components
1. Controlled component usage scenarios: Generally used when it is necessary to dynamically set its initial value. For example: when editing some form information, the input form element needs to initially display a certain value returned by the server and then edit it.
2. Uncontrolled component usage scenarios: Generally used when there is no dynamic initial value information. For example: when creating information in a form, none of the input form elements have initial values and require user input.
Extended knowledge:
1. Controlled components
In HTML, the tag of the form element ,
