目录
一、引言
二、demo文件结构
三、核心代码
一、引言
要实现对列表的增、删、改功能:对于列表的各行数据可以直接删除,显示数据(对话框显示)并能修改,保存新数据;也可新增新一行的数据。
效果图如下:
test - StackBlitz -
二、demo文件结构 三、核心代码App.js
注释:
1. lodash是一套工具库,内部封装了很多字符串、数组、对象等常见数据类型的处理函数。
2. lodash的所有函数都不会在原有的数据上进行 *** 作,而是复制出一个新的数据而不改变原有数据。类似immutable.js的理念去处理。
3. lodash 的 cloneDeep 方法是对数据进行深拷贝,不清楚深浅拷贝的可以看看我上一篇文章超清晰 ,一文理解:深拷贝与浅拷贝(js)
4. Form.useForm()创建 Form 实例,用于管理所有数据状态,对表单数据域进行交互。相关api 可参考 antd-Form 官网
5. EditorModal 是专门封装的对话框组件,见下文。
import React, { useState } from 'react';
import { Table, Tag, Space, Card, Popconfirm, Button } from 'antd';
import { cloneDeep } from 'lodash';
import EditorModal from './components/editor-modal';
import { tableData } from './mock';
import './style.css';
export default function App() {
const [editorModalVisible, setEditorModalVisible] = useState(false);
const [record, setRecord] = useState(null);
const [isNew, setIsNew] = useState(false);
const [dataSource, setDataSource] = useState(tableData);
const handleDel = (record) => {
setDataSource(dataSource.filter((item) => item.key !== record.key));
};
const showEditor = (record, isNew = false) => {
setEditorModalVisible(true);
setIsNew(isNew);
if (isNew) {
setRecord({ key: dataSource[dataSource.length - 1].key++ });
} else {
setRecord(cloneDeep(record));
}
};
const handleOk4EditorModal = (data) => {
if (isNew) {
let newDataSource = [...dataSource, data];
setDataSource(newDataSource);
} else {
const newDataSource = dataSource.map((item) => {
if (item.key === data.key) {
return { ...item, ...data };
} else {
return item;
}
});
setDataSource(newDataSource);
}
setEditorModalVisible(false);
};
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: (text) => {text},
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Gender',
dataIndex: 'gender',
key: 'gender',
render(text, record) {
return ['female', 'male'][record.gender];
},
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: (tags) => (
<>
{tags.map((tag) => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
{tag.toUpperCase()}
);
})}
>
),
},
{
title: 'Action',
key: 'action',
render: (text, record) => (
showEditor(record)}>Edit
handleDel(record)}
>
Delete
),
},
];
const afterClose = () => {
setRecord(null);
setIsNew(false);
};
return (
完成列表的增、删、改功能
setEditorModalVisible(false)}
handleOk={handleOk4EditorModal}
afterClose={afterClose}
isNew={isNew}
/>
);
}
/components/editor-modal/index.js
注释:
1. 主体部分就是一个 Modal对话框 包裹一个 Form 表单,该组件配置6个属性参数用于数据交互及d框显示。
2. 代码前半部分主要是一些初始和副作用钩子的设置,数据更新的原则为不直接 *** 作原数据!
import React, { useEffect } from 'react';
import { Form, Modal, Radio, Input, InputNumber, Select } from 'antd';
const noop = () => {};
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 14 },
};
const EditorModal = (props) => {
const {
visible,
record,
handleOk = noop,
handleCancel = noop,
afterClose,
isNew,
} = props;
const [form] = Form.useForm();
useEffect(() => {
if (visible) {
form.setFieldsValue(record);
} else {
form.resetFields();
}
}, [visible]);
const onOk = () => {
const values = form.getFieldsValue();
handleOk({ ...record, ...values });
};
return (
Female
Male
);
};
export default EditorModal;
/mock/index.js
注释:
1. 该文件主要是准备一些死数据,用于列表初始情况的展示
export const tableData = [
{
key: '1',
name: 'John Brown',
age: 32,
gender: 1,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
gender: 1,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Jane Black',
age: 32,
gender: 0,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)