React-非受控组件

没有受 React 控制，没有设置 value 属性的组件就是非受控组件；如果想要获取非受控组件中的值需要通过 DOM 操作，通过 ref 属性来获取。

步骤：

1. 首先在 constructor 构造中创建一个引用

   let iptRef = React.createRef()
   

2. 在组件中通过 ref 将表单和引用绑定在一起

   <input ref={this.iptRef} />
   

3. 通过引用中的 current 属性获取到指定的 DOM 元素后再通过 value 拿到对应的值

示例：

import React from 'react'
import ReactDOM from 'react-dom'

class CommentList extends React.Component {
  constructor(props) {
    super()
    // 创建引用
    this.iptRef = React.createRef()
  }
  render () {
    return (
      <div>
        {/* 绑定 */}
        <input ref={this.iptRef} />
        <button onClick={this.fun.bind(this)}>获取</button>
      </div>
    )
  }
  fun () {
    // 通过引用获取 value 值
    console.log(this.iptRef.current.value)
  }
}
ReactDOM.render(<CommentList />, document.getElementById('root'))