郑州做系统集成的公司网站,龙岩,网站的优化和推广方案怎么写,清远网站设计公司说明
通常情况下#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预览
