表单元素的受控组件和非受控组件

非受控组件

非受控组件：这时表单数据将交由 DOM 节点来处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值）

要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref 来从 DOM 节点中获取表单数据。

class App extends React.Component{

            submit = (e)=>{
                console.log(this.textInput.value) //打印输入框的值是什么
                e.preventDefault()  //取消默认事件
            }

            render(){
                return (
                    <div>
                        <form onSubmit={this.submit}>
                        	//    name属性                    通过ref的回调形式来从DOM节点获取数据（详情访问https://www.cnblogs.com/axingya/p/13598832.html）
                            <input name="textInput" type="text" ref={el=>this.textInput = el}/>    
                            <input type="submit"/>   //提交按钮
                        </form>
                    </div>
                )
            }
        }

通过ref给form表单做标记，在一些条件下，可以直接拿值（ submit = (e)=>{}的时候）

受控组件（官网推荐）

受控组件：在HTML中，表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态通常保存在组件的 state中，并且只能通过使用 setState()来更新。我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。受控组件必须要有onChange

渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。

被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

class App extends React.Component{
            constructor(){
                super()
                this.state = {
                //默认值
                    value:"123"
                }
            }
            submit = (e)=>{
                console.log(this.state.value)
                e.preventDefault()
            }
            // 执行该函数，通过setState方式改变值，这样数据就会受到管理，
            handleChange = (e)=>{
                this.setState({
                    value:e.target.value
                })
            }

            render(){
                return (
                    <div>
                        <form onSubmit={this.submit}>
                            {/*就不需要ref标记了   一旦写了value属性就必须另外添加上onChange回调函数搭配，一旦输入就执行函数 */}
                            <input name="textInput" type="text" value={this.state.value} onChange={this.handleChange}/>    
                            <p>{this.state.value}</p>
                            <input type="submit"/>
                        </form>
                    </div>
                )
            }
        }

组件分类：大方向上有函数式组件 or 类组件

对表单元素而言，组件分类:受控组件 vs 非受控组件

​ 受控组件： 受到数据的控制，使得react成为唯一的数据源. 像input 通过value={this.state.value}绑定状态 触发事件onChange={()=>{this.setState({value:e.target.value})}}
非受控组件： 只需要在dom元素上面通过ref进行绑定取值即可。