Detailed explanation of react controlled components and uncontrolled components

This article mainly introduces a brief discussion of react controlled components and uncontrolled components (summary). Now I share it with you and give it a reference.

We all know that there are many web components that can be changed by user interaction, such as: d5fd7aea971a85678ba271703566ebfd, 221f08282418e2996498697df914ce4e, or the rich text editor I am using now. These components are very inconspicuous in daily development. We can easily change the value of the component by entering some content or setting the value attribute of the element. However, because React is bound by one-way data flow, these components may become out of control:

1. An 0d8d8502ad9fc5bd029f7f31e30fdff5 component that maintains the value in its own state cannot be modified from the outside;

2. An 0d8d8502ad9fc5bd029f7f31e30fdff5 component that sets value through props can only be updated through external control.

I recently encountered a problem when using a react-based ant-design UI component produced by Ant Financial. When editing the page, the input box will display the data before saving, but using defaultValue does not work. , the input box is always empty instead of the specific incoming value. The code related to the text box in the specific editing page is as follows:

    ... //render方法上面的内容省略
 <FormItem
   label="问题描述："
   hasFeedback
   {...props.formItemLayout}
 >
  <Input type="textarea" defaultValue={props.value}/>
</FormItem>
      //render下面的内容省略
      ...

After passing value props to the component to which the code segment belongs, the default value in the text box is always empty, because in the state where the page is located, value The initial value of the corresponding state is empty, causing the value in the state corresponding to value to be changed after a subsequent asynchronous request is successful, and it will still be displayed as empty.

Google the specific reason. It turns out that once the defaultValue in the form component of React is passed, subsequent changes to the defaultValue will have no effect and will be ignored.

Specifically, this is a react uncontrolled component. Its state is controlled within the input react and is not controlled by the caller. This can be achieved using controlled components.

Let’s talk about this controlled component and uncontrolled component. They are all based on react’s form component elements. For details, you can also refer to the react official website for this introduction

Controlled component

Formally speaking, a controlled component is to add a value attribute to a form component; an uncontrolled component is a component that does not add a value attribute; the form of a controlled component is as follows Form:

render: function() {
  return <input type="text" value="Hello!" />;
 }

The form component element with the value attribute added will not maintain its own state internally. Once the value of the component is set to a specific value, it will always be this value, so the caller needs to control the component. value changes.

This way of writing brings a problem: any value entered by the user will not work in the user interaction of the rendered input component, and the value in the input box is always Hello!. This is inconsistent with the behavior of input in HTML.

For this reason, in order to control the component, you need to be able to control the value of the input component. You need to use its internal state, that is, a state must be maintained inside the component to cooperate with the onChange and setState methods of the input component. Complete the control of the component; for example, the above form can be encapsulated into an inputItem component, which maintains a state internally. The specific code is as follows:

 export default class InputItem extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      value: ""
    }
  }

  componentWillReceiveProps(nextProps){
    this.setState({
      value: nextProps.value
    })
  }

  _onChange(evt){
    this.setState({
      value: evt.target.value
    })
  }

  render(){
    return (
      <input type="text" 
        value={this.state.value} 
        onChange={this._onChange.bind(this)}/>
    );
  }
}

In this way, the InputItem component can be called externally as follows:

<InputItem value={this.state.userName} />

In this way, you can control the Input component of react. In fact, you need to use react's stateful component to complete it, because the stateful component can maintain state internally.

Uncontrolled components

In terms of expression, form component elements that do not add a value attribute in react are uncontrolled components. The expression is as follows:

<input type="text" />

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

Summary

When using react component, you will encounter controlled components or uncontrolled components; at present, react components recommend using stateless components, but using this There is no big problem when using uncontrolled components to implement react components. If you need to control controlled elements, there will be problems, as shown in:

`Controlled components` need to actively maintain an internal state Stateful, while `stateless component` does not need to maintain the state of the component, so the two conflict.
So, controlled elements cannot be created using stateless components.

In view of the characteristics of controlled components and uncontrolled components, the application places of the two are also different, mainly manifested in:

1. Controlled elements are generally used in Situations where its initial value needs to be set dynamically; 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 elements are generally used when there is no dynamic initial value information; for example, when creating information in a form, the input form elements have no initial value and require user input

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

New features of webpack 4.0.0-beta.0 version (detailed tutorial)

Vue components and Route Life cycle (detailed tutorial)

Use SpringMVC to solve vue cross-domain requests

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