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

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

一、受控组件

1. 表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似.
2. 受控组件，表单元素的修改会实时映射到状态值上，此时就可以对输入的内容进行校验.
3. 受控组件只有继承React.Component才会有状态.
4. 受控组件必须要在表单上使用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}