受控组件与非受控组件在大多数情况下，我们推荐使用受控组件来处理表单数据。在一个受控组件中，表单数据是由 React

参考地址：

非受控组件

在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以 使用 ref 来从 DOM 节点中获取表单数据。

例如，下面的代码使用非受控组件接受一个表单的值：

class {
-    constructor(props){
2        super(props);
2        this.handleSubmit=this.handleSubmit.bind(this)
2        this.input=React.creareRef()
2    }
|
-    handleSubmit(){
2        alert('A name was Submitted' + this.input.current.value)
2        event.preventDefault();
2    }
|
-    render(){
2        return
2            <form onSubmit={this.handleSubmit}>
2                <label>
2                    Name:<input type='text' ref={this.input} />
2                </label>
2                <input type='submit' value='Submit'>
2            </from>
2    }
|}

默认值

在 React 渲染生命周期时，表单元素上的 value 将会覆盖 DOM 节点中的值，在非受控组件中，你经常希望 React 能赋予组件一个初始值，但是不去控制后续的更新。在这种情况下, 你可以指定一个 defaultValue 属性，而不是 value。

文件输入

在 HTML 中，<input type="file"> 可以让用户选择一个或多个文件上传到服务器，或者通过使用 File API 进行操作。

在 React 中，<input type="file" /> 始终是一个非受控组件，因为它的值只能由用户设置，而不能通过代码控制。