react 之 useImperativeHandle

jiojio冲冲冲

已于 2024-05-28 10:38:35 修改

阅读量409

点赞数 3

分类专栏： React 文章标签： react.js javascript 前端

于 2024-02-02 09:44:20 首次发布

本文链接：https://blog.csdn.net/weixin_42268006/article/details/135986881

版权

React 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了如何在React中通过`useImperativeHandle`和`ref`实现父组件直接调用子组件内部方法的场景，展示了如何将子组件的聚焦功能暴露给父组件控制。

摘要由CSDN通过智能技术生成

useImperativeHandle是通过ref暴露子组件中的方法

1.场景说明-直接调用子组件内部的方法

在这里插入图片描述

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

// 子组件

const Son = forwardRef((props, ref) => {
  // 实现聚焦逻辑
  const inputRef = useRef(null)
  const focusHandler = () => {
    inputRef.current.focus()
  }

  // 把聚焦方法暴露出去
  useImperativeHandle(ref, () => {
    return {
      // 暴露的方法
      focusHandler
    }
  })
  return <input type="text" ref={inputRef} />
})


// 父组件
function App () {
  const sonRef = useRef(null)
  const focusHandler = () => {
    console.log(sonRef.current)
    sonRef.current.focusHandler()
  }
  return (
    <>
      <Son ref={sonRef} />
      <button onClick={focusHandler}>focus</button>
    </>
  )
}

export default App