react中受控组件与非受控组件

不能懒鸭

已于 2022-03-10 09:31:26 修改

阅读量611

点赞数 1

分类专栏： react基础文章标签：前端 react.js

于 2022-03-05 23:05:36 首次发布

本文链接：https://blog.csdn.net/m0_45382009/article/details/123303061

版权

本文介绍了React中的受控组件和非受控组件。受控组件的值由React state控制，每次变化时都需要手动更新state，而非受控组件则直接将值存储在DOM中，通过ref属性获取。受控组件确保数据一致性，但可能导致代码冗余，非受控组件则简化了代码结构。

摘要由CSDN通过智能技术生成

受控？什么受什么控制？
输入类表单元素的值 受 setState的控制

在HTML中，表单元素（如：input textarea select通常自己维护state,并根据用户输入进行更新。而在react中，可变状态通常保存在组件的state属性中，并且只能通过使用setState()来更新。

1. 受控組件

react官网简述：https://zh-hans.reactjs.org/docs/forms.html#controlled-components

每当输入框内容发生变化时，都会被写入组件的state中，这种组件在react中别理解为受控组件。
受控组件的值value，始终由react中的state驱动

具体流程：
1. 首先通过state设置输入框的默认值
2. 当输入框的值发生变化时，调用onChange事件处理器
3. 事件处理器通过合成事件对象 e 拿到改变后的数据，并且更新应用的state
4. setState触发视图的重新渲染，完成数据的更新展示。

class Login extends React.Component{
   
    state={
   
        username:'',
        password:''
    }
    userChange=(e)=>{
   
        this.setState({
   username:e