当前位置：首页 > article >正文

react hooks--useImperativeHandle

article 2024/11/17 5:34:44

基本语法

◼ 我们先来回顾一下ref和forwardRef结合使用：

 通过forwardRef可以将ref转发到子组件；

 子组件拿到父组件中创建的ref，绑定到自己的某一个元素中；

◼ forwardRef的做法本身没有什么问题，但是我们是将子组件的DOM直接暴露给了父组件：

 直接暴露给父组件带来的问题是某些情况的不可控；

 父组件可以拿到DOM后进行任意的操作；

 但是，事实上在上面的案例中，我们只是希望父组件可以操作的focus，其他并不希望它随意操作；

◼ 通过useImperativeHandle可以只暴露固定的操作：

 通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起；

 所以在父组件中，使用 inputRef.current时，实际上使用的是返回的对象；

 比如我调用了 focus函数，甚至可以调用 printHello函数；

语法：

useImperativeHandle(ref, createHandle, [deps])

ref：外部传入的ref
createHandle：一个函数，返回需要暴露出去的数据
[deps]：监听的属性

演示示例

Input.jsx

import React, { memo, forwardRef, useImperativeHandle, useRef } from 'react'

const Input = memo(forwardRef((props, ref) => {

  const inputRef = useRef()

  // 子组件对父组件传入的ref进行处理
  // 参数一：外部传入的ref
  // 参数据二：一个函数，返回需要暴露出去的数据
  // 参数三（可选）：[deps]--监听的属性
  useImperativeHandle(ref, () => {
    return {
      focus() {
        console.log('focus');
        inputRef.current.focus()
      }
    }
  })

  return (
    <div>
      {/**<input type="text" ref={ref} /> */}
      <input type="text" ref={inputRef} />
    </div>
  )
}))

export default Input

父组件绑定ref：

import React, { memo, useRef } from "react";
import Input from "./components/Input";

const App = memo(() => {

  const titleRef = useRef()
  const inputRef = useRef();

  const handleDom = () => {
    // console.log(titleRef.current);
    
    inputRef.current.focus()
    inputRef.current.value = ''
  }

  return (
    <div>
      <h3 ref={titleRef}>哈哈哈</h3>
      <button onClick={() => handleDom()}>handleDom</button>

      <Input ref={inputRef}></Input>
    </div>
  );
});

export default App;

自定义暴露出去的数据在.current里面。这样才能使用函数组件内部的方法或属性。

查看全文

http://www.kler.cn/a/324133.html