react受控组件是什么

WBOY
Freigeben: 2022-06-27 17:54:26
Original
2202 人浏览过

在react中,受控组件指的是通过回调函数来更新当前值的组件;渲染表单的React组件还控制着用户输入过程中表单发生的操作,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件。

react受控组件是什么

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react受控组件是什么

 渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

有网友这样解释:在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件。

受控组件的更新流程:

  • 1,可以通过在初始state中设置表单的默认值

  • 2,每当表单的值发生变化时,调用onChange事件处理器,

  • 3,事件处理器通过事件对象e拿到改变后的状态,改变state;

  • 4,setState触发视图更新,完成表单组件值的更新

受控组件是通过通过回调函数来更新当前值,譬如 OnChange。父组件则通过回调函数控制并管理它的状态并将新值作为属性传给它。受控组件也称为“哑巴组件”。

const { useState } from 'react';
function Controlled () {
  const [email, setEmail] = useState();
  const handleInput = (e) => setEmail(e.target.value);
  return ;
}
Nach dem Login kopieren

扩展知识:

什么是不受控组件?

不受控组件则是内部存储自身状态的组件,可以使用 ref 查询 DOM,以便在需要时查找其当前值。有点像传统的 HTML。大多数原生的 React 表单组件都支持受控和不受控:

const { useRef } from 'react';
function Example () {
  const inputRef = useRef(null);
  return 
}
Nach dem Login kopieren

4 它们之间有什么区别?

在受控组件中,表单数据由 React 组件处理。而在不受控组件中,表单数据由 DOM 本身处理。

对于受控组件,必须使用组件状态。对于不受控制的组件,状态的使用是完全可选的,但必须在其中使用 Refs 。

对于受控组件,我们可以在输入时进行验证,但对于不受控组件则不能进行验证。

【相关推荐:javascript视频教程web前端

以上是react受控组件是什么的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!