【React】之受控组件和非受控组件

阿昊在

已于 2022-03-11 16:58:58 修改

阅读量5k

点赞数 2

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

于 2022-03-11 15:28:44 首次发布

本文链接：https://blog.csdn.net/m0_48982503/article/details/123423497

版权

本文详细介绍了React中的受控组件和非受控组件。受控组件的表单数据由React状态控制，通过onChange事件更新；而非受控组件则直接在DOM中维护状态，使用ref获取数据。官方推荐使用受控组件以确保数据源的统一，但在特定情况下，如大量表单元素时，非受控组件更为合适。

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

React中的组件根据是否受React控制可分为受控的和非受控的。

一、受控组件

表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似.
受控组件，表单元素的修改会实时映射到状态值上，此时就可以对输入的内容进行校验.
受控组件只有继承React.Component才会有状态.
受控组件必须要在表单上使用onChange事件来绑定对应的事件.

import React, { Component } from 'react'
export default class Shoukong extends Component {
    // 这样的写法也是声明在实例上的对象
    state = {
        username: "ff",
       // 给组件状态设置默认值，在实时修改时进行校验
    }
    // e为原生的事件绑定对象
    handleChange = (e) => {
        // 获取原生对象上的属性
        let name = e.target.name;
        this.setState({
            username: e.target.value
        })
    }

    render() {
        return (
            <div>
                <p>{this.state.username}</p>
                用户名：<input
                    type="text"
                    value={this.state.username}