react表单处理之 受控组件的基本使用

目录

一 关于受控组件

二 使用受控组件

使用步骤

代码

三 优化代码

---

一 关于受控组件

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

那么解决办法是什么呢?

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

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

二 使用受控组件

使用步骤

1 在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源)
state = {
        txt: 123
    }
<input value={this.state.txt} />    

2 给表单元素绑定一个change事件,将表单元素的值设置为 state 的值(控制表单元素值的变化)
fn = e => {
        this.setState({
                //e.target.value 就表示当前文本框的最新值
                txt: e.target.value
            }
        )
    }
<input onChange={this.fn}/>

备注: 复选框是通过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的值也跟着变化

关于此react插件的安装请看这里

三 优化代码

步骤
1 给表单元素添加name属性,名称与state 相同
2 根据表单元素类型获取对应值
3 在change事件处理程序中,通过name来修改对应的state

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

class App extends React.Component {

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

    }

    fn = e => {
        //获取当前DOM对象
        const target = e.target
        //根据target类型获取不同的值
        const value = target.type === 'checkbox'
            ? target.checked
            : target.value

        const name = target.name
        //更新
        this.setState({
              [name]  : value
            }
        )
    }

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

        )
    }

}

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

备注:
文本框和下拉框 改变的是value
复选框 改变的是 checked属性