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>
    )
  }

}