1. Controlled components
In HTML, form elements like ,
We combine the two by making React a single data source state. The React component responsible for rendering forms still controls what happens to subsequent user input. Accordingly, input form elements whose values are controlled by React are called “managed components.”
Since the value property is set on our form element, the displayed value will always be the value of this.state.value from the React data source. Since each keystroke triggers handleChange to update the current React state, the values displayed also change with input from different users.
<input type="text" value={this.state.value} onChange={this.handleChange} />Copy the code
2. Uncontrolled components
To write an uncontrolled component, rather than writing an event handler for each status update, you can use ref to get form values from the DOM.
During the React lifecycle, the value attribute on the form element overrides the value in the DOM. When using uncontrolled components, you usually want React to be able to specify initial values for them but not control subsequent updates. To solve this problem, you can specify a defaultValue property instead of value.
<input type="text" defaultValue={'1232'} ref={this.input} />Copy the code
For example:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.input = React.createRef();
this.state = {
value:'567'
}
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.current.value);
event.preventDefault();
}
handleChange(e){
this.setState({value: e.target.value});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" defaultValue={'1232'} ref={this.input} />
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<NameForm />,
document.getElementById('root'));Copy the code
Try it on CodePen.
3. Compare controlled and uncontrolled components
Convert the input letter to uppercase display
<input
type="text"value={this.state.value} onChange={(e) => { this.setState({ value: e.target.value.toUpperCase(), }); }} / >Copy the code
Display the typed letters directly
<input
type="text"
defaultValue={this.state.value}
/>Copy the code
A. Performance problems
In the controlled components, change the value of each form, will be called an onChange event handler, it will lead to the loss of performance, although the use of controlled components won’t appear these problems, but still do not advocate the use of controlled components, this problem can be through the Flux/Redux application architecture to achieve unified component state .
B. Whether event binding is required
Using controlled components is a prerequisite for binding a change event to each component and defining an event handler to synchronize form values and component state. Of course, there are cases where you can use a single event handler to process multiple form fields
import React, { Component } from 'react'; class Controlled extends Component { constructor(... args) { super(... args); this.state = { name:'xiaoming',
age: 18,
};
}
handleChange = (name, e) => {
const { value } = e.target;
this.setState({
[name]: value,
});
}
render() {
const { name, age } = this.state;
return (
<div>
<input type="text" value={name} onChange={this.handleChange.bind(this, 'name')} />
<input type="text" value={age} onChange={this.handleChange.bind(this, 'age',)} /> </div> ); }}export default Controlled;Copy the code
Reference:
https://segmentfault.com/a/1190000012404114#articleHeader2
https://react.docschina.org/docs/uncontrolled-components.html