Detailed explanation of react controlled components and uncontrolled components

We all know that there are many web components that can be changed by user interaction, such as: , , 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: This article mainly introduces React controlled components and uncontrolled components to you, and I hope it can help you.

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

2. An component that sets the value through props The component can only be updated via 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, the initial value of the state corresponding to value is empty. As a result, after subsequent asynchronous requests are successful, the value in the state corresponding to value is changed and the value is still 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; a controlled component The form is as follows:

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

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

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 components; 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, it can be externally like The InputItem component is called as follows:

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

In this way, you can control the Input component of react. In fact, you need to use the stateful component of react 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 elements.

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, and 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 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

Related recommendations:

Detailed explanation of React controlled components and uncontrolled components

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!