react_6

条件查询

import { Input, Select, 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";
// 服务端分页
//从Select组件中解构出Option组件,以便使用Option组件时就不用写Select.前缀
const { Option } = Select;
export default function A5() {
  const [students, setStudents] = useState([]);
  const [loading, setLoading] = useState(true);
  // 代表查询条件的状态数据
  const [form, setForm] = useState({});
  const options = [
//label代表标题
    { label: "男", value: "男" },
    { label: "女", value: "女" },
  ];
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 5,
//显示可以选择每页分页显示数据的行数的下拉列表
    showSizeChanger: true,
//自定义下拉列表的每页分页显示数据的行数的选项
    pageSizeOptions: [1, 3, 7],
  });
  useEffect(() => {
    async function getStudents() {
      const resp = await axios.get>>(
//会以这种请求格式 /api/students/q?name=&age=&page= 发送给服务器
        "http://localhost:8080/api/students/q",
        {
          params: {
            page: pagination.current,
            size: pagination.pageSize,
//展开运算符，会以name:'xx',sex:'xx' ...方式展开
            ...form  // 补充查询参数
          },
        }
      );
      setStudents(resp.data.data.list);

      setPagination((old) => {
        // 服务端分页需要total属性
        return { ...old, total: resp.data.data.total };
      });
    }
    setLoading(false);
    getStudents();
    // 当页号和每页记录数改变了重新查询,当姓名、性别、年龄改变是会返回新的form对象，重新查询数据
  }, [pagination.current, pagination.pageSize, form]);
//当分页条件改变时触发onChange事件，执行onTableChange函数，更新分页在状态数据，重新查询
  function onTableChange(newPagination: TablePaginationConfig) {
    setPagination(newPagination);
  }
    // name 条件改变时处理函数,e代表Input输入名字时触发的事件
  function onNameChang(e: ChangeEvent) {
    setForm((old) => {
      return { ...old, name: e.target.value };
    });
  }
 // sex 条件改变时处理函数,value代表下列列表传入的值
  function onSexChange(value: string) {
    setForm((old) => {
      return { ...old, sex: value };
    });
  }
 // age 条件改变时处理函数,value代表下拉列表传入的值
  function onAgeChange(value: string) {
    setForm((old) => {
      return { ...old, age: value };
    });
  }
  const columns: ColumnsType = [
    { title: "编号", dataIndex: "id" },
    { title: "姓名", dataIndex: "name" },
    { title: "性别", dataIndex: "sex" },
    { title: "年龄", dataIndex: "age" },
  ];
  return (
    

      

        
        
        
 {/* "1,19"字符串会被后台Spring框架自动转化为整数数组传给服务器*/}
          20以下
          20左右
          30左右
          40以上
        
      
      
    
  );
}

• 建议 axios 发请求是用 params 而不要自己拼字符串，因为自己拼串需要去掉值为 undefined 的属性

• 其中 StudentQueryForm 为

• export interface StudentQueryForm {
    name?: string,
    sex?: string,
    age?: string,
    [key: string]: any
  }