react中利用useRef、forwardRef、useImperativeHandle获取并处理dom

React如何给组件设置ref属性，如果直接绑给组件，代码如下：

import { useRef } from "react"

function MyInput() {
	return (
		<input type="text"/>
	)
}
 
function App() {
  const myRef = useRef(null)
  const handleClick = () => {
    ref.current.style.background = "red"
    ref.current.focus()
  }
  return (
  	<div>
    	<button onClick={handleClick}>点击</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

此时点击按钮，发现无法正确拿到MyInput组件中的input元素，并且控制台报错。因为MyInput函数作用域中并没有绑定ref。

根据提示，需要使用forwardRef()，写法如下：

import { useRef,forwardRef } from "react"

const MyInput = forwardRef(function MyInput(props,ref) {
	return (
		<input type="text" ref={ref}/>
	)
})

function App() {
  const myRef = useRef(null)
  const handleClick = () => {
    ref.current.style.background = "red"
    ref.current.focus()
  }
  return (
  	<div>
    	<button onClick={handleClick}>点击</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

但上述写法会将MyInput组件中的input全部暴露出来，导致在其他组件中，可以对该元素进行任意操作，如果仅想对外提供某些功能，需要修改为如下写法：

import { useRef,forwardRef,useImperativeHandle } from "react"

const MyInput = forwardRef(function MyInput(props,ref) {
  // 添加如下
  const inputRef = useRef(null)
  useImperativeHandle(ref,()=>{
  	return {
      // 自定义方法
      focus(){
				inputRef.current.focus()
      }
   	}
  })
	return (
		// 
    <input type="text" ref={inputRef}/>
	)
})

function App() {
  const myRef = useRef(null)
  const handleClick = () => {
    ref.current.style.background = "red"
    ref.current.focus()
  }
  return (
  	<div>
    	<button onClick={handleClick}>点击</button>
      <MyInput ref={myRef}></MyInput>
    </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

再次点击，可以发现只有focus会触发,背景色不会修改且控制台会有提示。