What is the difference between react controlled components and uncontrolled components

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 react controlled components and uncontrolled components

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 , , <select>, etc. value changes are usually updated based on user input. </select>

In React, mutable state is usually saved in the component's state property and can only be updated using setState(), and the React component that renders the form also controls what happens in the form on subsequent user input. The situation where an input form element controlled by React changes its value is called a controlled component.

For example, bind an onChange event to the form element input. When the input state changes, the onChange event will be triggered to update the state of the component.

import React, { Component } from 'react'
export default class MyInput extends Component{
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    }
  }
  handleChange = (event)=>{
    this.setState({
        value: event.target.value
    })
  }
  render(){
    return(
      <div>
          <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
           />
      </div>
    )
  }
}

The process of updating state of controlled components

1. You can set the default value of the form in the initial state

2. Whenever the value of the form changes, call onChange event handler

3. The event handler gets the changed state through the event object event and updates the component's state

4. Once the state is updated through the setState method, the view will be triggered. Re-rendering to complete the update of the form component

The data in React flows in a single item. From the example, it can be seen that the data of the form comes from the state of the component and is passed in through props. This is also called a single item. Bind to data. Then the new data is written back to the state through the onChange event handler, completing two-way data binding.

2. Uncontrolled components

Uncontrolled components refer to form data being processed by the DOM itself. That is, it is not controlled by setState(). It is similar to traditional HTML form input. The input value displays the latest value.

In uncontrolled components, you can use a ref to get the form value from the DOM.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    console.log('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

The uncontrolled component maintains its own state internally during the underlying implementation, so that any value input by the user can be reflected on the element.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What is the difference between react controlled components and uncontrolled components. For more information, please follow other related articles on the PHP Chinese website!