首页 > 其他分享 >React hooks子组件暴露方法示例

React hooks子组件暴露方法示例

时间:2024-09-23 20:02:29浏览次数:8  
标签:const name 示例 hooks React User 组件 import desc

说明

通常情况下,React 子组件使用父组件的方法或值通过props传递,反过来,父组件如果需要子组件的方法就需要子组件将自己的方法暴露出去。以下是一个实例:

User.tsx

import React, { FC, useEffect, useState, useRef } from 'react';
import { Button, Table } from 'antd';
import UserEdit, { UserEditRef } from './UserEdit';
import { EditFilled } from '@ant-design/icons';

interface User {
  desc?: string;
  name?: string;
}
const User: FC = () => {
  const userEditRef = useRef<UserEditRef>(null);
  const columns: any = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '描述',
      dataIndex: 'desc',
      key: 'desc',
    },
    {
      title: '操作',
      render: (_: string, record: User) => {
        return (
          <EditFilled
            onClick={(e) => {
              userEditRef.current?.open(record);
            }}
          />
        );
      },
    },
  ];
  const [datasource, setDatasource] = useState<User[]>([
    {
      desc: 'I am Tom',
      name: 'Tom',
    },
    {
      desc: 'I am Marry',
      name: 'Marry',
    },
  ]);

  const updateData = (data?: User) => {
    const datas = [data, ...datasource];
    setDatasource(datas);
  };

  return (
    <div>
      <Button
        onClick={() => {
          userEditRef.current.open();
        }}
      >
        新建
      </Button>
      <Table columns={columns} dataSource={datasource} />
      <UserEdit ref={userEditRef} onSave={updateData} />
    </div>
  );
};

export default User;

UserEdit.tsx

import { useState, useImperativeHandle, forwardRef } from 'react';
import { Form, Input, Drawer, Button } from 'antd';

interface User {
  userId?: number;
  desc?: string;
  name?: string;
}

interface PropType {
  onSave: Function;
}

export interface UserEditRef {
  open: (currentUser?: User) => void;
}

const UserEdit = forwardRef<UserEditRef, PropType>((props, ref) => {
  //props
  const { onSave } = props;
  // state
  const [userEditOpen, setUserEditOpen] = useState(false);
  const [currentFormData, setCurrentFormData] = useState<User>();

  // 暴露给父组件的属性,open是打开抽屉的方法
  useImperativeHandle(ref, () => ({
    open: (currentUser?: User) => {
      setUserEditOpen(true);
      setCurrentFormData(currentUser);
    },
  }));

  const onCancel = () => {
    setUserEditOpen(false);
  };

  const onFinish = (values: any) => {
    onSave(values);
    setUserEditOpen(false);
  };

  return (
    <Drawer
      title={
        currentFormData ? '用户 | ' + currentFormData?.name : '用户 | 新建'
      }
      width="auto"
      open={userEditOpen}
      footer={null}
      onClose={onCancel}
      destroyOnClose
    >
      <Form initialValues={currentFormData} onFinish={onFinish}>
        <Form.Item
          label="组名"
          name="name"
          rules={[{ required: true, message: '请输入用户名!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item label="描述" name="desc">
          <Input.TextArea />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button
            htmlType="button"
            onClick={onCancel}
            style={{ marginLeft: 8 }}
          >
            取消
          </Button>
        </Form.Item>
      </Form>
    </Drawer>
  );
});

export default UserEdit;

 

标签:const,name,示例,hooks,React,User,组件,import,desc
From: https://www.cnblogs.com/lguow/p/18427773

相关文章

  • 个性化电商系统之订单物流分拆策略示例代码
    个性化电商系统中的订单物流分拆是一个复杂但至关重要的功能,它涉及到如何将一个订单中的多个商品根据不同的配送策略进行分拆,以优化物流成本和提高配送效率。下面我们将详细解析订单物流分拆的思路,并提供一些源码示例。一、订单物流分拆策略1、订单分析:首先,系统需要分析订单中每个......
  • PowerShell 脚本示例,可以实现一键关闭显示器的功能:
    PowerShell脚本示例,可以实现一键关闭显示器的功能:powershellCopyCode#一键关闭显示器的函数functionTurn-OffDisplay{#调用User32.dll中的API来关闭显示器Add-Type-TypeDefinition@"usingSystem;usingSystem.Runtime.InteropServices;......
  • 【艾思科蓝】前端框架巅峰对决:React、Vue与Angular的全面解析与实战指南
    【JPCS独立出版】​第三届能源与动力工程国际学术会议(EPE2024)_艾思科蓝_学术一站式服务平台更多学术会议请看:https://ais.cn/u/nuyAF3 引言在快速发展的前端技术领域,选择合适的框架或库对于项目的成功至关重要。React、Vue和Angular作为当前最流行的三大前端框架/库,各自......
  • css使用@media响应式适配各种屏幕的方法示例
    定义和使用使用@media查询,你可以针对不同的媒体类型定义不同的样式。@media可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。PC端设备屏幕的宽度......
  • QCustomPlot QCPBars横向柱状图示例
    #include"qcustomplot.h"intmain(intargc,char*argv[]){QApplicationa(argc,argv);QCustomPlotcustomPlot;customPlot.resize(700,500);customPlot.show();QCPAxis*keyAxis=customPlot.yAxis;QCPAxis*valueAxis=......
  • QCustomPlot QCPBars纵向柱状图示例
    #include"qcustomplot.h"intmain(intargc,char*argv[]){QApplicationa(argc,argv);QCustomPlotcustomPlot;customPlot.resize(700,500);customPlot.show();QCPAxis*keyAxis=customPlot.xAxis;QCPAxis*valueAxis=......
  • <<编码>> 第 17 章 自动操作(1)--计算设备 示例电路
    info::操作说明首先闭合清零(clear)开关,清除8位触发器(锁存器)中的内容,并把16位计数器的输出置为0000H然后闭合RAM控制面板的控制端开关(接管信号开关)手动输入一组要加的数注:RAM地址0,1,2,3处已预设了1,2,3,4四个值断开接管控制开......
  • 开源MySQL 数据库闪回工具:MyFlash数据恢复工具的安装及使用示例
    MyFlash是一个由美团点评开源的MySQL数据库闪回工具,它专门用于回滚MySQL中的DML操作,如INSERT、UPDATE和DELETE。这个工具通过解析MySQL的binlog文件来实现数据的恢复。使用MyFlash前,需要确保MySQL的binlog格式设置为ROW,并且binlog_row_image设置为FULL。以......
  • MySQL binlog解析工具binlog2sql使用示例
    binlog2sql是一个用于解析MySQL的二进制日志(Binlog)的工具,它可以将Binlog事件转换为SQL语句,这对于审计、数据同步等场景非常有用。binlog2sql通常用于实现MySQL数据的实时同步到其他数据库或系统中。安装binlog2sql首先,你需要安装binlog2sql。如果你使用的是Python环......
  • myflash MySQL数据恢复工具的使用示例:误删除数据恢复和误修改数据恢复两种场景
    以下是myflash数据恢复工具的使用示例,分为误删除数据恢复和误修改数据恢复两种情况:误删除数据恢复:构建测试环境:创建测试数据库和表。假设你已经安装并启动了MySQL服务,登录到MySQL客户端,执行以下语句创建一个名为testdb的数据库和一个名为user的表:sqlCREATEDATABASEtest......