在react中，不能像在Vue中那样双向数据绑定，来动态的响应数据的变化，所以在操作表单的时候需要我们手动操作。

问题引入

现在我们需要做一个简易的登录功能，在选择提交的时候获取用户名和密码的value。

做法

我们分别用可控组件和不可控组件来实现两个input的值的获取。

用户名（不可控组件）

import React from "react"

export default class LoginForm extends React.Component{
  constructor(props){
        super(props);

        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(event){
        // 组织事件默认行为
        event.preventDefault();
        // 获取nameInput
        const name = this.nameInput.value;
        alert(name);
    }
    render (){
        return (
            <form action="/test" onSubmit={this.handleSubmit}>
                用户名：<input type="text" ref={ input => this.nameInput =  input}/><br/>
                <input type="submit" value="提交"/>
            </form>
        )
    }
}

• 在获取用户名的过程中，我们使用ref获取input的value,并在提交时alert出来，这看起来与原生的写法相似。

密码（可控组件）

import React from "react"

export default class LoginForm extends React.Component{
    constructor(props){
        super(props);

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        // 初始化状态
        this.state = {
            pwd:""
        }
    }
    handleSubmit(event){
        // 组织事件默认行为
        event.preventDefault();
        // 获取nameInput
        const name = this.nameInput.value;
        const pwd = this.state.pwd;
        alert(name+","+pwd);
    }
    handleChange(event){
        const pwd = event.target.value;
        this.setState({pwd:pwd})
    }
    render (){
        return (
            <form action="/test" onSubmit={this.handleSubmit}>
                用户名：<input type="text" ref={ input => this.nameInput =  input}/><br/>
                密码：<input type="password" value={ this.state.pwd } onChange={ this.handleChange }/><br/>
                <input type="submit" value="提交"/>
            </form>
        )
    }
}

• 在对密码的获取中，采用了可控组件的方法，将数据先存在状态（state）中，然后在密码input中设定一个value,将状态中的value赋值给他。
  但是，此时我们发现，密码输入框似乎失效了，并不能输入。这是因为我们每次输入，都会被替换成state.pwd的值，pwd的值总是空字符串，所以无法修改。

• 我们需要在每次输入有变化的时候，通过setState来修改我们state中的数据以达到动态响应的效果。

总结

可控组件就是通过state绑定数据，使用onChange动态地响应改动来获取数据。
不可控组件就是通过类似原生的方法，直接获取input中的数据。

但是官方更推荐可控组件的写法，因为在react中，我们不推荐直接操作DOM，而不可控组件实际上是直接操作了DOM元素，最好的做法是数据驱动界面。