react--ref属性

ref属性

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例。ref可以挂载到组件上也可以是dom元素上。

• 挂到组件(class声明的组件)上的ref表示对组件实例的引用。
• 不能在函数式组件上使用 ref 属性，因为它们没有实例：
• 挂载到dom元素上时表示具体的dom元素节点。

在React 最新的版本中，要使用ref, 需要使用React.createRef方法先生成一个ref。

import React, { Component, createRef } from 'react'
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')
)

callback回调函数形式

import React, { Component, createRef } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
  componentDidMount () {
    console.log(this.input) // <input type="text">
  }
  render () {
    return (
  		<div>
        {/* 关联ref和dom */}
        <input type="text" ref={(el)=>{this.input=el}} />
      </div>
  	)
  }
}
ReactDOM.render(
	<App/>,
  document.getElementById('root')
)

函数式组件里面通过React 16.8推出的新特性 Hooks实现（useRef）

函数式组件内部无this/无生命周期钩子函数

function App(){
    const input = React.useRef()
    return (
        <div>
            <input type="text" ref={input}/>    
        	<button onClick={()=>{input.current.focus()}}>Focus</button>
        </div>
	)
}
ReactDOM.render(<App/>,document.getElementById("box"))