React Uncontrolled components and controlled components

“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

React Uncontrolled components and controlled components

Components in React can be divided into uncontrolled components and controlled components. The control here refers to whether the component state is controlled by React. In HTML elements, form elements such as , , and < SELECT > maintain and store their state in the value attribute and update it based on user input. In React, mutable state is usually stored in the component’s state property state and can only be updated using the setState() method. If it’s not too clear, let’s take a concrete example. This is a form submission example.

Uncontrolled components and controlled components

1. Uncontrolled components

class Login extends React.Component {
	handleSubmit = (event) = > {
		event.preventDefault() // Block form submission
		const { username, password } = this
		alert('The username you entered is:${username.value}, your password is:${password.value}`)}render() {
		return (
			<form onSubmit={this.handleSubmit}>User name:<input ref={c= >This. username = c} type="text" name="username" /><input ref={c= > this.password = c} type="password" name="password" />
				<button>The login</button>
			</form>)}}Copy the code

Discovered by instance, in uncontrolled components

1. React itself does not maintain component state (value of input element)
2. When a value needs to be retrieved, the component (element) is retrieved from ref, and then the value is retrieved from the component (element).
3. The whole process is a take-and-take.

2. Controlled components

class Login extends React.Component{

	// Initialization state
	state = {
		username:' './ / user name
		password:' ' / / password
	}

	// Save the user name to the status
	saveUsername = (event) = >{
				this.setState({username:event.target.value})
	}

	// Save the password to the status
	savePassword = (event) = >{
				this.setState({password:event.target.value})
	}

	// Form submission callback
	handleSubmit = (event) = >{
		event.preventDefault() // Block form submission
		const {username,password} = this.state
		alert('The username you entered is:${username}, your password is:${password}`)}render(){
		return(
			<form onSubmit={this.handleSubmit}>User name:<input onChange={this.saveUsername} type="text" name="username"/>Password:<input onChange={this.savePassword} type="password" name="password"/>
				<button>The login</button>
			</form>)}}Copy the code

Discovered by instance, in a controlled component

1. React uses the state property to maintain component state. The value of the input property is maintained in the state property.
2. Because the state of the component is already maintained in the state property, it can be read directly from the state when fetching the corresponding data, without fetching the corresponding component (element).
3. The whole process is about maintaining and reading the state of a component.

choose

Both uncontrolled components and controlled components have their advantages and disadvantages and need to be analyzed on a case-by-case basis. Uncontrolled components are relatively simple to implement, but more dependent on REF. Controlled components can better maintain data flows, but the implementation is more complex. In the case of complex form validation scenarios, controlled components are more flexible.

A controlled component differs from an uncontrolled component

React: Controlled components are different from uncontrolled components