免费网站大全推荐,怎么给网站添加关键词,自己做网站公司,平台网站怎么推广说明
通常情况下#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预览
