Controlled components and uncontrolled components

I. Project scenario

When using Antd’s Form component in a project, you may need to nest the Select component (possibly other components). In this case, it does not take effect to change the value by setting the value of the Select itself.

<Form> < form. Item name= "itemName ">< Select> <Option Value =" Jing "></ Option ></ Select> </ form. Item> </Form>Copy the code
  • Form.getFieldsValue()
  • Form.getFieldValue(name)
  • form.setFieldsValue({ [itemName]: value });
// Query the column item.columns? .forEach((i: any) => { if ('' + i.id === value) { form.setFieldsValue({ [itemName]: value }); }});Copy the code

Two, knowledge points

2.1 Controlled Components

In HTML, changes in the values of tags ,

A controlled component adds a value attribute to a form component

return <input type="text" value="Hello!" / >;Copy the code

A form component element with a value attribute does not maintain its own state internally. Once a specific value is set, the value of the component is always that value, so the caller needs to control the change of the component value.

2.2 Uncontrolled Components

The form data is handled by the DOM itself. This is not controlled by setState() and, like traditional HTML form input, the input value displays the latest value (use ref to get the form value from the DOM).

An uncontrolled component is one that does not have a value attribute added

 <input type="text" />
Copy the code

An uncontrolled component maintains its own state state within the underlying implementation; This shows that any value entered by the user is reflected on the element.

Third, understand

Controlled and uncontrolled components are the entry points for React forms, and data control or page generation and updates depend on executing JSX instructions.

Single form elements have special features. The user can select and change the display of the interface using the keyboard and mouse. Changing the interface also means that some data is changed, notably the value of the input, innerHTML of the textarea, checked of the radio/checkbox, Option’s selected and selectedInedx are modified passively

<input value = {this.state.value} />
Copy the code

When input.value is derived from the component’s state.value, when the user modifies the input and then tries to refresh, does input.value take the user’s new value or state’s new value?

React think value/checked cannot exist alone, need with the onInput/onChange/disabed/readOnly control value/checked property or event. Together, they constitute controlled components

If the user does not write these additional properties and events, then the framework will add events to it, such as onClick, onInput, and onChange, that prevent you from typing or selecting and make it impossible to change its value. Inside the framework, there is a stubborn variable, which I call persistValue, that remains the same value that JSX last assigned to it, only for internal events to modify it.

  • A controlled component is the control of a value that can be done through an event.

  • PersistValue is always refreshed in a controlled component.

Then look at uncontrolled components, since the value/checked already occupied, React to enable another group to be ignored in the HTML attributes defaultValue/defaultChecked. They are generally assumed to communicate with Value/Checked, that is, if the value does not exist, the value of defaultValue is assumed to be value.

The display of form elements is controlled by the internal persistValue, so defaultXXX also synchronizes the persistValue, which in turn synchronizes the DOM. But the starting point for uncontrolled components is to be faithful to the user’s actions if the user is in the code

input.value = "xxxx"
Copy the code
<input defaultValue={value} /> //Copy the code

Four,

  • Controlled elements, typically used when their initial values need to be set dynamically; For example, when editing some form information, the input form element needs to initially display some value returned by the server and then edit it.
  • Uncontrolled elements, generally used when there is no dynamic initial value information; For example, when the form creates information, the input form elements have no initial values and require user input

A controlled component can change its value (,

In the TREE component of Antd, when only the default attribute is set to it, the tree is an uncontrolled component.

A tree is a controlled component when a property without default is set (controlled property).

Therefore, it can be seen that: the attribute name without default is controlled attribute, and the attribute name with default is uncontrolled attribute.