what are react controlled components

In React, a controlled component refers to a component that updates the current value through a callback function; the React component that renders the form also controls the operations that occur on the form during user input, whenever the state of the form changes. , will be written to the state of the component. This type of component is called a controlled component in React.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is react controlled component

The React component that renders the form also controls the operations that occur on the form during user input. Form input elements whose values ​​are controlled by React in this way are called "controlled components".

Some netizens explained this: In React, whenever the state of the form changes, it will be written to the state of the component. This type of component is called a controlled component in React.

Update process of controlled components:

• 1, you can set the default value of the form in the initial state

• 2. Whenever the value of the form changes, call the onChange event handler,

• 3. The event handler gets the changed state through the event object e, and changes the state;

• 4, setState triggers the view update and completes the update of the form component value

The controlled component updates the current value through a callback function, such as OnChange . The parent component controls and manages its state through callback functions and passes new values ​​to it as properties. Controlled components are also called "dumb components".

const { useState } from 'react';
function Controlled () {
  const [email, setEmail] = useState();
  const handleInput = (e) => setEmail(e.target.value);
  return <input type="text" value={email} onChange={handleInput} />;
}

Expand knowledge:

What are uncontrolled components?

Uncontrolled components are components that store their own state internally. You can use ref to query the DOM to find its current value when needed. Kind of like traditional HTML. Most native React form components support both controlled and uncontrolled:

const { useRef } from 'react';
function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

4 What is the difference between them?

In controlled components, form data is processed by React components. In uncontrolled components, the form data is handled by the DOM itself.

For controlled components, component state must be used. For uncontrolled components, the use of state is completely optional, but Refs must be used within them.

For controlled components, we can validate on input, but not for uncontrolled components.

【Related recommendations: javascript video tutorial, web front-end】

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