本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一 受控组件

1.1 受控组件介绍

html的表单元素是可以输入的,也就是有自己的可变状态
而react中的可变状态通常保存在state中,并且只能通过setState()方法来修改
于是就发生冲突了

那么解决办法是什么呢?

react将state与表单元素的value值绑定在一起
由state的值来控制表单元素的值

受到react控制的表单元素 就叫 受控组件

1.2 使用受控组件

使用步骤

1 在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源)

2 给表单元素绑定一个change事件,将表单元素的值设置为 state 的值(控制表单元素值的变化)
备注: 复选框是通过checked属性来控制的,而不是value

代码

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {

    //初始化state
    state = {
        txt: 123,
        select: 'yellow',
        flag: true

    }

    //处理文本框的变化
    fn = e => {
        this.setState({
                //e.target.value 就表示当前文本框的最新值
                txt: e.target.value,
            }
        )
    }
    //处理下拉框的变化
    fnColor = e => {
        this.setState({
                select: e.target.value
            }
        )
    }

    // 处理复选框的变化
    fnBox = e => {
        this.setState({
                flag: e.target.checked
            }
        )
    }

    render() {
        return (
            <div>
                {/*文本框*/}
                <input type='text' value={this.state.txt} onChange={this.fn}/>
                {/*下拉框*/}
                <select value={this.state.select} onChange={this.fnColor}>
                    <option value='blue'>蓝色</option>
                    <option value='yellow'>黄色</option>
                    <option value='white'>白色</option>
                </select>
                {/*复选框*/}
                <input type='checkbox' checked={this.state.flag} onChange={this.fnBox}/>饭否
            </div>

        )
    }

}

ReactDOM.render(<App/>, document.getElementById("root"));

初始页面预览

修改内容之后 

修改内容之后state的值也跟着变化

二 非受控组件

说明

借助于ref,使用原生DOM方式来获取表单元素的值

ref的作用

获取DOM 或组件

步骤

1 创建ref对象 构造方法里: this.txt = React.createRef()

2 将创建好的ref对象添加到文本框中 <input type='text' ref={this.txt}/>

3 通过ref获取到文本框的值 this.txt.current.value

备注: 大多数情况还是使用表单的 受控组件来处理

代码

import React from "react";
import ReactDOM from "react-dom";
 
class App extends React.Component {
 
    constructor() {
        super()
        //创建ref
        this.txt = React.createRef()
    }
 
    fn=()=>{
        alert(this.txt.current.value);
    }
 
    render() {
        return (
            <div>
                {/*将创建好的ref对象添加到文本框中*/}
                <input type='text' ref={this.txt}/>
                <button onClick={this.fn}>获取文本框的值</button>
            </div>
 
        )
    }
 
}
 
ReactDOM.render(<App/>, document.getElementById("root"));