在 React 中，允许我们通过 refs 来访问和操作 Dom 元素或组件实例。

在类组件中使用 refs 有三种方式：

①、字符串形式的 ref：(不推荐使用，该 API 在 React 未来的版本中将会被移除)

class App extends React.Component {
	getInput = () => {
		console.log(this.refs.myInput) // 获取input的dom元素
	}
	render () {
		return (
			<div>
				<input type="text" ref="myInput" onBlur={ this.getInput } />
			</div>
		)
	}
}

export default App;

②、回调形式的 ref：

// ref回调被定义为内联函数
class App extends React.Component {
	getInput = () => {
		console.log(this.myInput) // 获取input的dom元素
	}
	render () {
		return (
			<div>
				<input type="text" ref={ el => this.myInput = el } onBlur={ this.getInput } />
			</div>
		)
	}
}

export default App;


// 或者也可以写成下面这种形式，ref回调被定义为类上的绑定方法
class App extends React.Component {
	getInputRef = (el) => {
		this.inputRef = el
	}
	getInput = () => {
		console.log(this.inputRef)  // 获取input的dom元素
	}
	render () {
		return (
			<div>
				<input type="text" ref={ this.getInputRef } onBlur={ this.getInput } />
			</div>
		)
	}
}

export default App;

③、使用 createRef（主要用于类组件，在函数组件中通常使用 useRef）

class App extends React.Component {
	myRef = React.createRef()
	getInput = () => {
		console.log(this.myRef.current) // 获取input的dom元素
	}
	render () {
		return (
			<div>
				<input type="text" ref={ this.myRef } onBlur={ this.getInput } />
			</div>
		)
	}
}

export default App;

在函数组件中使用 refs 主要是通过 useRef 这个 API 来实现的

import { useRef } from "react"
export default function App () {
    const myRef = useRef(null)
    function getInput () {
        console.log(myRef.current)
    }
    return (
        <div>
            <input type="text" ref={myRef} onBlur={ getInput } />
        </div>
    )
}