一关于受控组件

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"));

初始页面预览