React-forwardRef-useImperativeHandle

forwardRef 暴露dom节点

作用:使用ref暴露DOM节点给父组件

案例

例如在父组件中想要获取子组件input的输入值,和让input获取焦点

父组件
javascript 复制代码
import { Button } from 'antd-mobile'
import Son from "./components/son";
import { useState,useRef } from "react";
const Year = () => {
  const inputRef = useRef(null)
  const getinputRef =()=>{
  console.log(inputRef);
  console.log(inputRef.current.value);    //子组件的输入内容
  inputRef.current.focus() //获取焦点
  }
  return (
    <div>
      父组件
      <Son ref={inputRef}></Son>
      <div className="purple-theme">
        <Button color="primary" onClick={getinputRef}>按钮</Button>
      </div>
    </div>
  );
};
export default Year;
子组件
javascript 复制代码
import { forwardRef } from "react";
const Son = forwardRef((props,ref) => {
    console.log('我是子组件'); 
  return (
    <div>
      我是子组件
      <input type="text" ref={ref}></input>
    </div>
  );
})
export default Son;

useImperativeHandle 暴露子组件方法

作用:使用ref暴露子组件中的方法

案例

父组件通过ref调用子组件内部的focus方法实现使input获取焦点

子组件
javascript 复制代码
import { forwardRef,useImperativeHandle,useRef } from "react";
import { Button } from 'antd-mobile'
const Son = forwardRef((props,ref) => {
    console.log('我是子组件'); 
    const inputRef = useRef(null)
    //聚焦方法
    const FocusInput = ()=>{
        console.log(inputRef);
        inputRef.current.focus()
        
    }
    // 把子组件方法暴露出去
    useImperativeHandle(ref,()=>{
        return {
            FocusInput
        }
    })
  return (
    <div>
      我是子组件
      <input type="text" ref={inputRef}></input>
    </div>
  );
})
export default Son;
父组件
javascript 复制代码
import { Button } from 'antd-mobile'
import Son from "./components/son";
import { useState,useRef } from "react";
const Year = () => {
  const SonRef = useRef(null) 
  //调用子组件暴露的方法
  const getinputRef =()=>{
      SonRef.current.getinputRef()
  }
  return (
    <div>
      父组件
      <Son ref={SonRef}></Son>
      <div className="purple-theme">
        <Button color="primary" onClick={getinputRef}>按钮</Button>
      </div>
    </div>
  );
};
export default Year;
相关推荐
r0ad7 分钟前
从痛点到解决方案:为什么我开发了Chrome元素截图插件
前端·chrome
OEC小胖胖14 分钟前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
jingling55526 分钟前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
en-route28 分钟前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
IT_陈寒29 分钟前
Vite 5年迭代揭秘:3个核心优化让你的项目构建速度提升200%
前端·人工智能·后端
怎么吃不饱捏1 小时前
vue3+vite,引入阿里巴巴svg图标,自定义大小颜色
前端·javascript·vue.js
无敌最俊朗@1 小时前
MQTT 关键特性详解
java·前端·物联网
JAVA学习通1 小时前
微服务项目->在线oj系统(Java-Spring)----[前端]
java·开发语言·前端
excel1 小时前
Vue3 响应式系统核心执行器:Reactive Effect 与依赖调度机制
前端
南玖i3 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js