react表单处理 非受控组件

没有和state数据源进行关联的表单项，而是借助ref，使用元素DOM方式获取表单元素值

使用步骤

• 调用 React.createRef() 方法创建ref对象
• 将创建好的 ref 对象添加到文本框中
• 通过ref对象获取到文本框的值

class App extends React.Component {

  constructor(props){

    super(props)

    //创建 ref

    this.username = React.createRef()

  }

  // 获取文本框的值

  fn =() => {

    console.log(this.username.current.value)

  }

  render(){

    return (

        <div>

          <input type ="text" ref={this.username} />

          <button onClick ={this.fn}>获取值</button>

        </div>

    )

  }

import React, { Component, createRef } from 'react'
// import React, { Component } from 'react'

export default class User3 extends Component {

  // 构造方法
  constructor(props) {
    super(props);
    // 定义一个用户的引用
    this.username = createRef()
  }

  addUser() {
    console.log(this.username.current.value);
  }

  render() {
    return (
      <div>
        <div>
          {/* 非受控组件 */}
          <input type="text" ref={this.username} />
        </div>

        <div>
          <button onClick={this.addUser.bind(this)}>添加用户</button>
        </div>

      </div>
    )
  }





}