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>
        )
    }
}

2、非受控组件

借助于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>
        )
    }
}

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

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

秦时明月汉时关，?

万里长征人未还。

?但使龙城飞将在，?

不教胡马度阴山。

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