XKolento
XKolento

React进阶笔记4（非受控组件）

在大多数情况下，我们推荐使用 受控组件 来实现表单。在受控组件中，表单的数据通过React数据来处理，如果让表单数据由dom处理时，替代的方案为使用非受控组件。

要编写一个非受控组件，并不是为每一个状态更新都编写一个事件处理程序，我们可以 使用 ref 从 DOM 获取表单值。

demo

下面的代码在非受控组件中获得单个表单的值

class NameForm extends React.Component{
    constructor(props){
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(event){
        alert('a name was submitted'+this.input.value);
        event.preventDefault();
    }
    render(){
        return(
            

                
                
            

        )
    }
}

ReactDOM.render(
    ,document.getElementById('root')
)

由于非受控组件将真实数据保存在DOM中，所以在使用非受控组件时，更容易同时集成React和非React的代码。如果想快速并且随性一点，这样可以减少一些代码量。否则就应该使用受控组件。

如果依然不清楚在哪种情况下使用哪种类型的组件。那么你应该阅读 这篇关于受控和非受控的表单输入 了解更多。

默认值

在React的生命周期中，表单元素中的value属性将会覆盖dom中的值。使用非受控组件时，通常是希望React可以为他指定初始值，但是不在控制他的后续更新，如果要解决这个问题，可以指定一个defaultValue，而不是value。

    render(){
        return(
            

                
                
            

        )
    }

同样， 和 支持 defaultChecked，