antd drawer extra中按钮点击事件获取子组件的数据

在Ant Design的Drawer组件中,需要在extra区域的按钮点击事件中获取子组件的数据,可以通过以下步骤实现:

使用useRef钩子在父组件中创建一个ref引用子组件。

在子组件中使用useImperativeHandle或forwardRef来暴露一个方法给父组件调用。

在extra按钮的点击事件中,调用子组件暴露的方法获取数据。

javascript 复制代码
// 子组件
import React, { useImperativeHandle, forwardRef } from 'react';
 
const ChildComponent = forwardRef((props, ref) => {
  const data = { name: '子组件数据' };
 
  useImperativeHandle(ref, () => ({
    getData: () => data
  }));
 
  return (
    <div>子组件内容</div>
  );
});
 
export default ChildComponent;
 
// 父组件
import React, { useRef } from 'react';
import { Drawer } from 'antd';
import ChildComponent from './ChildComponent';
 
const ParentComponent = () => {
  const childRef = useRef();
 
  const handleButtonClick = () => {
    if (childRef.current) {
      const data = childRef.current.getData();
      console.log('从子组件获取的数据:', data);
    }
  };
 
  return (
    <Drawer
      title="Drawer标题"
      extra={
        <button onClick={handleButtonClick}>获取子组件数据</button>
      }
    >
      <ChildComponent ref={childRef} />
    </Drawer>
  );
};
 
export default ParentComponent;

上述代码中,ChildComponent是一个子组件,它使用forwardRef获取了一个ref引用。在ChildComponent内部,它通过useImperativeHandle暴露了一个getData方法,该方法返回需要传递给父组件的数据。在ParentComponent的handleButtonClick事件处理函数中,通过childRef.current.getData()调用子组件的方法来获取数据。

相关推荐
gnip16 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫17 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel18 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼18 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手1 天前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法1 天前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku1 天前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode1 天前
iOS 苹果内购 Storekit 2
前端
LuckySusu1 天前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu1 天前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript