react_7
删除
import { Button, Popconfirm, message } from "antd";
import axios from "axios";
import R from "../model/R";
export default function A6Delete({
id,
onSuccess,
}: {
id: number;
onSuccess?: () => void;
}) {
async function onConfirm() {
const resp = await axios.delete>(
`http://localhost:8080/api/students/${id}`
);
message.success(resp.data.data);
onSuccess && onSuccess();
}
return (
);
}
使用删除组件
import { Button, Input, Select, Space, Table } from "antd";
import { PageResp, Student, StudentQueryForm } from "../model/Student";
import { ColumnsType, TablePaginationConfig } from "antd/es/table";
import { ChangeEvent, useEffect, useState } from "react";
import axios from "axios";
import R from "../model/R";
import A6Delete from "./A6Delete";
import A6Update from "./A6Update";
import A6Insert from "./A6Insert";
import A6DeleteSelected from "./A6DeleteSelected";
// 服务端分页
const { Option } = Select;
export default function A6() {
const [students, setStudents] = useState([]);
const [loading, setLoading] = useState(true);
const [form, setForm] = useState({});
const options = [
{ label: "男", value: "男" },
{ label: "女", value: "女" },
];
const [pagination, setPagination] = useState({
current: 1,
pageSize: 5,
showSizeChanger: true,
pageSizeOptions: [1, 3, 5, 7],
});
useEffect(() => {
async function getStudents() {
const resp = await axios.get>>(
"http://localhost:8080/api/students/q",
{
params: {
page: pagination.current,
size: pagination.pageSize,
...form,
},
}
);
setStudents(resp.data.data.list);
setPagination((old) => {
const newPagination = { ...old, total: resp.data.data.total };
console.log(newPagination);
// 服务端分页需要total属性
return newPagination;
});
}
setLoading(false);
getStudents();
// 当页号和每页记录数改变了重新查询
}, [pagination.current, pagination.pageSize, form]);
function onTableChange(newPagination: TablePaginationConfig) {
setPagination(newPagination);
}
function onNameChang(e: ChangeEvent) {
setForm((old) => {
return { ...old, name: e.target.value };
});
}
function onSexChange(value: string) {
setForm((old) => {
return { ...old, sex: value };
});
}
function onAgeChange(value: string) {
setForm((old) => {
return { ...old, age: value };
});
}
function onDeleteSuccess() {
//当点击删除按钮删除成功之后，返回一个新的form对象，触发useEffect函数，重新查询数据更新页面
setForm((old) => {
return { ...old };
});
}
//修改功能开始
function onUpdateSuccess() {
setUpdateOpen(false);
setForm((old) => {
return { ...old };
});
}
function onUpdateClick(student: Student) {
setUpdateOpen(true);
setUpdateForm(student);
}
function onUpdateCancel() {
setUpdateOpen(false);
}
const [updateForm, setUpdateForm] = useState({
id: 3,
name: "",
sex: "女",
age: 33,
});
const [updateOpen, setUpdateOpen] = useState(false);
//修改功能结束
//新增功能开始
function onInsertSuccess() {
setInsertOpen(false);
setForm((old) => {
return { ...old };
});
}
function onInsertClick() {
setInsertOpen(true);
}
function onInsertCancel() {
setInsertOpen(false);
}
const [InsertForm, setInsertForm] = useState({
id: 3,
name: "拉拉",
sex: "女",
age: 33,
});
const [InsertOpen, setInsertOpen] = useState(false);
//新增功能结束
//删除选中功能开始
const [ids, setIds] = useState([]);
function onIdsChange(ids: React.Key[]) {
setIds(ids);
}
function onDeleteSelectedSuccess() {
setForm((old) => {
return { ...old };
});
setIds([]);
}
//删除选中功能结束
const columns: ColumnsType = [
{ title: "编号", dataIndex: "id" },
{ title: "姓名", dataIndex: "name" },
{ title: "性别", dataIndex: "sex" },
{ title: "年龄", dataIndex: "age" },
{
title: "操作",
dataIndex: "operation",
render: (_, student) => {
return (
{/* 使用删除组件 */}
);
},
},
];
return (
{/* 使用新增组件 */}
{/* 使用删除选中组件 */}
);
}