做搜狗网站优化首,福山区建设工程质量检测站网站,互联网广告联盟,克州建设工程信息网说明
通常情况下#xff0c;React 子组件使用父组件的方法或值通过props传递#xff0c;反过来#xff0c;父组件如果需要子组件的方法就需要子组件将自己的方法暴露出去。以下是一个实例#xff1a;
User.tsx
import React, { FC, useEffect, useState, useRef } from …说明
通常情况下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 useRefUserEditRef(null);const columns: any [{title: 名称,dataIndex: name,key: name,},{title: 描述,dataIndex: desc,key: desc,},{title: 操作,render: (_: string, record: User) {return (EditFilledonClick{(e) {userEditRef.current?.open(record);}}/);},},];const [datasource, setDatasource] useStateUser[]([{desc: I am Tom,name: Tom,},{desc: I am Marry,name: Marry,},]);const updateData (data?: User) {const datas [data, ...datasource];setDatasource(datas);};return (divButtononClick{() {userEditRef.current.open();}}新建/ButtonTable 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 forwardRefUserEditRef, PropType((props, ref) {//propsconst { onSave } props;// stateconst [userEditOpen, setUserEditOpen] useState(false);const [currentFormData, setCurrentFormData] useStateUser();// 暴露给父组件的属性open是打开抽屉的方法useImperativeHandle(ref, () ({open: (currentUser?: User) {setUserEditOpen(true);setCurrentFormData(currentUser);},}));const onCancel () {setUserEditOpen(false);};const onFinish (values: any) {onSave(values);setUserEditOpen(false);};return (Drawertitle{currentFormData ? 用户 | currentFormData?.name : 用户 | 新建}widthautoopen{userEditOpen}footer{null}onClose{onCancel}destroyOnCloseForm initialValues{currentFormData} onFinish{onFinish}Form.Itemlabel组名namenamerules{[{ required: true, message: 请输入用户名! }]}Input //Form.ItemForm.Item label描述 namedescInput.TextArea //Form.ItemForm.ItemButton typeprimary htmlTypesubmit提交/ButtonButtonhtmlTypebuttononClick{onCancel}style{{ marginLeft: 8 }}取消/Button/Form.Item/Form/Drawer);
});export default UserEdit;
效果预览
1、stackblitz预览 2、InsCode预览
