受控组件与非受控组件（三）

非受控组件

非受控组件指的是表单的数据不再由React组件进行管理，而是交给DOM节点处理，可以使用refs属性来从DOM节点中获取到数据。

class NameForm extends React.Component {
  constructor(props){
    super(props);
    this.input = React.createRef();
  }
  handleSubmit(e){
    console.log(this.input.current.value);
    e.preventDefault();
  }
  render(){
    return (
    	<form onSubmit={this.handleSubmit.bind(this)}>
      	<input type="text" ref={this.input} />
        <input type="submit" value="submit" />
      </form>
    )
  }
}

非受控组件将代码存储在真实的DOM节点中，可以节省很多代码。

在React组件中，表单元素的value值会覆盖这个DOM节点，如果我们想要给组件添加默认值，又不影响后续的输入，可以使用defaultValue属性：

<input defaultValue="hi" ref={this.input} />

什么时候用受控组件或非受控组件

受控组件的特点是它和state是类似双向绑定的，也就是通过state可以实时拿到表单中的数据。

The state gives the value to the input, and the input asks the Form to change the current value.

所以受控组件能快速响应表单内容的变化，它适用于以下场景：

• 输入实时验证
• 依照某个条件禁用或不禁用一个button
• 强制输入规范
• 多个输入映射到同一份data

非受控组件的使用场景主要有：

• 对DOM 元素焦点的控制、内容选择或者媒体播放；
• 通过对DOM元素控制，触发动画特效；
• 通第三方DOM库的集成。

参考资料：

关于受控和非受控组件

React官方文档