react受控组件与非受控组件

受控组件与非受控组件
###1非受控组件
非受控组件不需要写事件处理函数，由DOM自身进行维护。一般通过Ref进行DOM的绑定。

（1）创建组件

    class Login extends React.Component{
        handleSubmit=(event)=>{
            event.preventDefault() // 阻止默认提交事件
            const {username,password} = this
        }
        render(){
            <form action = '' onSubmit={this.handleSubmit}>
                用户名：<input ref={c=> this.username = c } type='text' />
                密码：<input ref={c=> this.password = c } type='password' />
                <button>登录</button>
            </form>
        }
    } 
    ReactDOM.render(<Login />,document.getElementById('test'))

###2受控组件
针对于表单元素而言，如果数据由组件本身进行维护，让react的state状态成为唯一数据源的话，那就是受控组件。

    class Login extends React.Component{
        // 初始化状态
        state={
            username:'',
            password:'',
        }
        handleSubmit=(event)=>{
            event.preventDefault() // 阻止默认提交事件
            const {username,password} = this
        }
        handleSubmit=(event)=>{
                this.setState({username:event.target.value})
        render(){
            <form action = '' >
                用户名：<input onChange={this.handleSubmit} type='text' />
                密码：<input ref={c=> this.password = c } type='password' />
                <button>登录</button>
            </form>
        }
    } 
    ReactDOM.render(<Login />,document.getElementById('test'))

React 有两种不同的方式来处理表单输入。

如果一个 input 表单元素的值是由 React 控制，就其称为受控组件。当用户将数据输入到受控组件时，会触发修改状态的事件处理器，这时由你的代码来决定此输入是否有效（如果有效就使用更新后的值重新渲染）。如果不重新渲染，则表单元素将保持不变。

一个非受控组件，就像是运行在 React 体系之外的表单元素。当用户将数据输入到表单字段（例如input 等）时，React 不需要做任何事情就可以映射更新后的信息。然而，这也意味着，你无法强制给这个表单字段设置一个特定值。

在大多数情况下，你应该使用受控组件。