React的受控组件和非受控组件

1.什么是非受控组件

从react官方文档介绍中可以得知：在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

2.非受控组件的使用

借助于ref，使用原生DOM的方式来获取表单元素的值

使用步骤分为4步：

1.导入：import{createRef } from 'react'

2.调用createRef方法创建引用，假设一个名字 const xxx=createRef()

3.refDom设置给表单元素的ref属性 <div ref={xxx}>

4.通过refDom.current.value来获取值,在控制台输出this.xxx.current.value

代码示例

// 1. 导入方法
import { createRef } from 'react'

class Abc extends Component {
  // 2. 调用createRef方法创建引用
  const xxx = createRef()

  handleClick = () => {
    // 4. 通过.current.value来获取值
    console.log(this.xxx.current.value)
  }

  render() {
    return (
      <div>
      	<h1>如何获取input中的值-非受控组件-ref</h1>
         {/* 3. 设置