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<R<string>>(
      `http://localhost:8080/api/students/${id}`
    );
    message.success(resp.data.data);
    onSuccess && onSuccess();
  }
  return (
    <Popconfirm title="确定删除学生吗" onConfirm={onConfirm}>
      <Button danger size="small">
        删除
      </Button>
    </Popconfirm>
  );
}

使用删除组件

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<Student[]>([]);
  const [loading, setLoading] = useState(true);
  const [form, setForm] = useState<StudentQueryForm>({});
  const options = [
    { label: "男", value: "男" },
    { label: "女", value: "女" },
  ];
  const [pagination, setPagination] = useState<TablePaginationConfig>({
    current: 1,
    pageSize: 5,
    showSizeChanger: true,
    pageSizeOptions: [1, 3, 5, 7],
  });
  useEffect(() => {
    async function getStudents() {
      const resp = await axios.get<R<PageResp<Student>>>(
        "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<HTMLInputElement>) {
    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<Student>({
    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<Student>({
    id: 3,
    name: "拉拉",
    sex: "女",
    age: 33,
  });
  const [InsertOpen, setInsertOpen] = useState(false);
  //新增功能结束
  //删除选中功能开始
  const [ids, setIds] = useState<React.Key[]>([]);
  function onIdsChange(ids: React.Key[]) {
    setIds(ids);
  }
  function onDeleteSelectedSuccess() {
    setForm((old) => {
      return { ...old };
    });
    setIds([]);
  }
  //删除选中功能结束
  const columns: ColumnsType<Student> = [
    { title: "编号", dataIndex: "id" },
    { title: "姓名", dataIndex: "name" },
    { title: "性别", dataIndex: "sex" },
    { title: "年龄", dataIndex: "age" },
    {
      title: "操作",
      dataIndex: "operation",
      render: (_, student) => {
        return (
          <Space>
{/* 使用删除组件 */}
            <A6Delete id={student.id} onSuccess={onDeleteSuccess}></A6Delete>
            <Button
              type="primary"
              size="small"
              //   如果事件函数需要传入参数，这个函数应该放在箭头函数里面
              onClick={() => {
                onUpdateClick(student);
              }}
            >
              修改
            </Button>
          </Space>
        );
      },
    },
  ];
  return (
    <div>
 {/* 使用新增组件 */}
      <A6Insert
        open={InsertOpen}
        onSuccess={onInsertSuccess}
        onCancel={onInsertCancel}
        student={InsertForm}
      ></A6Insert>
 {/* 使用修改组件 每行都同用一个修改组件*/}
      <A6Update
        open={updateOpen}
        student={updateForm}
        onSuccess={onUpdateSuccess}
        onCancel={onUpdateCancel}
      ></A6Update>
      <div>
        <Input
          style={{ width: 120 }}
          placeholder="请输入姓名"
          onChange={onNameChang}
          value={form.name}
        ></Input>
        <Select
          style={{ width: 120 }}
          placeholder="请选择性别"
          options={options}
          allowClear={true}
          value={form.sex}
          onChange={onSexChange}
        ></Select>
        <Select
          style={{ width: 120 }}
          placeholder="请选择年龄"
          allowClear={true}
          value={form.age}
          onChange={onAgeChange}
        >
          <Option value="1,19">20以下</Option>
          <Option value="20,29">20左右</Option>
          <Option value="30,39">30左右</Option>
          <Option value="40,120">40以上</Option>
        </Select>
        <Space>
          <Button type="primary" size="small" onClick={onInsertClick}>
            新增
          </Button>
{/* 使用删除选中组件 */}
          <A6DeleteSelected
            ids={ids}
            onSuccess={onDeleteSelectedSuccess}
          ></A6DeleteSelected>
        </Space>
      </div>
      <Table
        columns={columns}
        dataSource={students}
        rowKey="id"
        loading={loading}
        pagination={pagination}
        onChange={onTableChange}
        rowSelection={{ selectedRowKeys: ids, onChange: onIdsChange }}
      ></Table>
    </div>
  );
}