开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情

受控组件与非受控组件

包含表单的组件分类：

• 非受控组件：现用现取。即需要使用时，再获取节点得到数据
• 受控组件：类似于 Vue 双向绑定的从视图层绑定到数据层

尽量使用受控组件，因为非受控组件需要使用大量的 ref 。

非受控组件

在虚拟DOM节点上声明一个ref属性，并且将创建好的引用赋值给这个ref属性

react会自动将输入框中输入的值放在实例的ref属性上

 <script type="text/babel">
         //创建组件
         class Login extends React.Component{
             handleSubmit = (event)=>{
                 event.preventDefault() //阻止表单提交
                 const {username,password} = this
                 alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
             }
             render(){
                 return(
                     <form onSubmit={this.handleSubmit}>
                         用户名：<input ref={c => this.username = c} type="text" name="username"/>
                         密码：<input ref={c => this.password = c} type="password" name="password"/>
                         <button>登录</button>
                     </form>
                 )
             }
         }
         //渲染组件
         ReactDOM.render(<Login/>,document.getElementById('test'))
     </script>

非受控组件在底层实现时是在其内部维护了自己的状态state，这样子表现出用户输入任何值都能反应到元素上。

受控组件

表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似. 受控组件，表单元素的修改会实时映射到状态值上，这时候就可以对输入的内容进行校验. 受控组件必须继承React.Component才会有状态. 受控组件需要要在表单上使用onChange事件来绑定对应的事件

 <script type="text/babel">
         //创建组件
         class Login extends React.Component{
 ​
             //初始化状态
             state = {
                 username:'', //用户名
                 password:'' //密码
             }
 ​
             //保存用户名到状态中
             saveUsername = (event)=>{
                 this.setState({username:event.target.value})
             }
 ​
             //保存密码到状态中
             savePassword = (event)=>{
                 this.setState({password:event.target.value})
             }
 ​
             //表单提交的回调
             handleSubmit = (event)=>{
                 event.preventDefault() //阻止表单提交
                 const {username,password} = this.state
                 alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
             }
 ​
             render(){
                 return(
                     <form onSubmit={this.handleSubmit}>
                         用户名：<input onChange={this.saveUsername} type="text" name="username"/>
                         密码：<input onChange={this.savePassword} type="password" name="password"/>
                         <button>登录</button>
                     </form>
                 )
             }
         }
         //渲染组件
         ReactDOM.render(<Login/>,document.getElementById('test'))
     </script>