В React управляемый компонент относится к компоненту, который обновляет текущее значение с помощью функции обратного вызова; компонент React, который отображает форму, также управляет операциями, которые происходят в форме во время пользовательского ввода, всякий раз, когда состояние формы изменяется. быть записано в состояние компонента, такой компонент в React называется управляемым компонентом.
Операционная среда этого руководства: система Windows 10, версия 17.0.1, компьютер Dell G3.
Компонент React, который отображает форму, также контролирует, что происходит с формой во время пользовательского ввода. Элементы ввода формы, значения которых контролируются React таким образом, называются «управляемыми компонентами».
Некоторые пользователи сети объяснили это: в React всякий раз, когда состояние формы меняется, оно записывается в состояние компонента. Этот тип компонента в React называется управляемым компонентом.
Процесс обновления контролируемых компонентов:
1. Вы можете установить значение формы по умолчанию в исходном состоянии.
2. При каждом изменении значения формы вызывайте обработчик события onChange.
3. Обработчик событий получает измененное состояние через объект события e и изменяет состояние;
4. setState запускает обновление представления и завершает обновление значений компонентов формы.
Управляемые компоненты обновляют текущее значение с помощью функций обратного вызова, таких как OnChange. Родительский компонент контролирует и управляет своим состоянием посредством функций обратного вызова и передает ему новые значения в качестве свойств. Контролируемые компоненты также называют «глупыми компонентами».
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} />;}Расширьте свои знания:
Что такое неконтролируемые компоненты?
Неконтролируемые компоненты — это компоненты, которые хранят свое собственное состояние внутри себя и могут использовать ref для запроса DOM, чтобы найти свое текущее значение, когда это необходимо. Что-то вроде традиционного HTML. Большинство нативных компонентов форм React поддерживают контролируемые и неконтролируемые:
const { useRef } from 'react'; пример функции () { const inputRef = useRef (null); return <input type="text" defaultValue="bar" ref={inputRef} />}4 В чем разница между ними?
В контролируемых компонентах данные формы обрабатываются компонентами React. В неконтролируемых компонентах данные формы обрабатываются самим DOM.
Для управляемых компонентов необходимо использовать состояние компонента. Для неконтролируемых компонентов использование состояния совершенно необязательно, но внутри них необходимо использовать Refs.
Для контролируемых компонентов мы можем проверять входные данные, но не для неконтролируемых компонентов.