React的ref的使用步骤

ref的使用

ref主要工作是帮助我们获取到dom，从而可以进行dom操作

方式一:

import React, { Component, createRef } from 'react' //第一步需要导入createRef
import ReactDOM from 'react-dom'

class App extends Component {
  constructor() {
    super()
    // 第二步创建inputRef
    this.inputRef = createRef()
  }
  componentDidMount () {
    console.log(this.inputRef.current) // <input type="text">
  }
  render () {
    return (
  		<div>
        {/* 第三步关联ref和dom */}
        <input type="text" ref={this.inputRef} />  
      </div>
  	)
  }
}
ReactDOM.render(
	<App/>,
  document.getElementById('root')
)

方式二：

// ref使用回调函数的方式来调用 this.inputref就是dom对象,无需调用current

<input type="text"  ref={el => this.inputRef = el}>