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

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

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

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

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

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

原文地址：https://blog.csdn.net/u010234868/article/details/140525935

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！