1、受控组件定义

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
input受控组件的使用

import React, { PureComponent } from 'react'
export default class App extends PureComponent {
    constructor (props) {
        super(props);
        this.state = {
            message: "afad"
        }
    }
    render() {
        return (
            <div>
                <form onSubmit={ e => this.handleSubmit(e)}>
                    <label htmlFor="username" >
                        {/* 受控组件*/}
                        username: <input 
                                    type="text"
                                    id="username"
                                    onChange={e => this.handleChange(e)}
                                    value={this.state.message}></input>

                    </label>
                    <input type={"submit"} value="提交"></input>
                </form>
            </div>
        )
    }
    handleSubmit(event) {
        event.preventDefault(); // 取消默认提交行为
    }
    handleChange(event) {
        this.setState({
            message: event.target.value
        })
        console.log(event.target.value);
    }
}

select的受控组件

import React, { PureComponent } from 'react'
export default class App extends PureComponent {
    constructor (props) {
        super(props);
        this.state = {
            fruits: "orange"
        }
    }
    render() {
        return (
            <div>
                <form onSubmit={ e => this.handleSubmit(e)}>
                    <select name="fruits" onChange={e => this.handleChange(e)} value={this.state.fruits}>
                        <option value="apple">苹果</option>
                        <option value="banana">香蕉</option>
                        <option value="orange">橘子</option>
                    </select>
                    <input type={"submit"} value="提交"></input>
                </form>
            </div>
        )
    }
    handleSubmit(event) {
        event.preventDefault()
    }

    handleChange(event) {
        this.setState({
            fruits: event.target.value
        })
        console.log(event.target.value);
    }
}

补充知识点：

this.setState({
    // 计算属性名，动态获取key
    [this.state.name]: value
})

2、非受控组件

表单的值不使用state获取，直接通过dom获取，要使用非受控组件中的数据，那么我们需要使用 ref 来从DOM节点中获取表单数据

import React, { PureComponent, createRef } from 'react'
export default class App extends PureComponent {
    constructor (props) {
        super(props);
        this.userRef = createRef()
    }
    render() {
        return (
            <div>
                <form onSubmit={ e => this.handleSubmit(e)}>
                    <label htmlFor="username" >
                        {/* 受控组件*/}
                        username: <input 
                                    ref={(e) => {this.userRef = e}}
                                    type="text"
                                    id="username"></input>

                    </label>
                    <input type={"submit"} value="提交"></input>
                </form>
            </div>
        )
    }
    handleSubmit(event) {
        console.log(this.userRef.value)
        event.preventDefault()
    }
}