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