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()调用子组件的方法来获取数据。

相关推荐
清灵xmf8 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据15 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_3901617723 分钟前
防抖函数--应用场景及示例
前端·javascript
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript