Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "what the controlled components in react refer to", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what is the controlled components in react" can help you solve your doubts.

In react, the controlled component is a component that uses state to obtain and set the value of input elements; it can also be understood that the React component that renders the form also controls the operation of the form during the user input process, and the form input element that is controlled by React in this way is called the controlled component.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What is the controlled component in react

The React website explains the controlled component as follows: the React component that renders the form also controls what happens to the form during user input. Form input elements that are controlled by React in this way are called "controlled components".

The component that uses state to get and set the value of input elements is called a controlled component. Tags such as, and so on can use the value attribute to implement the controlled component.

Some netizens explained this: in React, whenever the state of the form changes, it will be written to the state of the component, which is called the controlled component in React.

Update process for controlled components:

1, you can set the default value of the form in the initial state

2, call the onChange event handler whenever the value of the form changes

3. The event handler gets the changed state through the event object e, and changes the state

4Query setState triggers the view update to complete the update of the form component values.

Example: input

-prevent form submission

Class NameForm extends React.Component {constructor (props) {super (props); this.state = {value:''}; this.handleChange = this.handleChange.bind (this); this.handleSubmit = this.handleSubmit.bind (this);} handleChange (event) {this.setState ({value: event.target.value}) } handleSubmit (event) {alert ('submitted name:' + this.state.value); event.preventDefault ();} render () {return (name:);}}

-file type input

/ / for input of file type, the attribute value is read-only, so uncontrolled components are read here. This article "what are controlled components in react" has been introduced. To master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to learn more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.