光阴小栈

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

一、不可控组件

<input type="text" defaultvalue="Hello React" />

如上：defaultvalue的值是固定的，该值不可修改，这就是一个不可控组件

如果要获取input的value值，只有使用ref获取节点来获取值

二、可控组件

<input type="text" defaultvalue={this.state.value} />

如上：defaultvalue的值是根据状态确定的，只需要拿到this.state.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>
        )
    }
}

密码（可控组件）

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

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