1、受控组件

html中的表单元素是可输入的，也就是有自己的可变状态，而，React中可变状态通常保存在state中，并且只能通过setState()方法来修改，React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值，那么受控组件其实就是受到React控制的表单元素。

代码示例

1、在state中添加一个状态，作为表单元素的value值（控制表单元素的来源）

2、给表单元素绑定change事件，将表单元素的值设置为sate的值（控制表单元素值的变化）

// 受控组件示例Class FormExample extends React.Component {   //简化语法   state = {        txt: '',        content: '',        city:'shanghai',        isChecked: false   }   handleChange = e => {    this.setState({        txt: e.target.value    })    }   handleContent = e => {    this.setState({        content: e.target.value    })    }   handleCity = e => {    this.setState({        city: e.target.value    })    }   handleChecked = e => {    this.setState({       isChecked: e.target.checked    })    }    render() {        return (            <div>                {/* 文本框 */}                <input type="text" value={this.state.txt} onChange={this.handleChange} />                <br/>                {/* 富文本框 */}                <textarea value={this.state.content} onChange={this.handleContent}></textarea>                <br/>                {/* 下拉框 */}                <select value={this.state.city} onChange={this.handleCity}>                    <option value="shanghai">上海</option>                    <option value="shenzhen">深圳</option>                    <option value="guangdong">广东</option>                </select>                <br/>                {/* 复选框 */}                <input type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked} />            </div>        )    }}

上面的代码，事件方法有一点啰嗦，可以进一步优化。

// 多表单元素优化Class FormExample extends React.Component {   state = {        txt: '',        content: '',        city:'bj',        isChecked: false   }  //  1 给表单元素添加name属性，名称与state相同  //  2 根据表单元素类型获取对应值  //  3 在change事件处理程序中通过[name] 来修改对应的state   handleForm = e => {        // 获取当前DOM对象        const target = e.target        // 根据类型获取值        const value = target.type === 'checkbox'            ? target.checked            : target.value        // 获取name        const name = target.name        this.setState({           [name]: value        })    }    render() {        return (            <div>                {/* 文本框 */}                <input  name="txt" type="text"value={this.state.txt} onChange={this.handleChange} />                <br/>                {/* 富文本框 */}                <textarea name="content" value={this.state.content} onChange={this.handleContent}></textarea>                <br/>                {/* 下拉框 */}                <select name="city" value={this.state.city} onChange={this.handleCity}>                    <option value="shanghai">上海</option>                    <option value="shenzhen">深圳</option>                    <option value="guangdong">广东</option>                </select>                <br/>                {/* 复选框 */}                <input name="isChecked" type="checkbox" checked={this.state.isChecked} onChange={this.handleChecked} />            </div>        )    }}

借助于ref, 使用原生DOM方式来获取表单元素值，ref的作用是获取DOM或组件

// 非受控组件class App extends React.Component {    constructor() {        super()        // 1. 调用React.createRef()方法创建一个ref对象        this.txtRef = React.createRef()    }        getTxt = () => {        // 3. 通过ref对象获取到文本框的值        console.log('文本框值为', this.txtRef.current.value)    }    render() {        return(            <div>                 // 2. 将创建好的ref对象添加到文本框中                <input type="text" ref={this.txtRef} />                <button onClick={this.getTxt}>获取文本框的值</button>            </div>        )    }}

#前端##失业##每日一诗#

------------------------------------------------------

秦时明月汉时关，

万里长征人未还。

但使龙城飞将在，

不教胡马度阴山。

------ 出塞 【唐】王昌龄