使用react与antd组件库实现新增，删除，修改，搜索功能（父组件子组件）

父组件
//导入接口
import { getCapacityReasonList, AddOrUpdate, deleteCapacityReason, addOrUpdateCapacityReason, exportCapacityReason } from '@/services/xc/octopus';
//导入子组件
import DrawerIndex from './Drawer'
export default function City() {
//  1.加载变量
 const [loading, setLoading] = useState(true)
 // 2.获取列表数据变量
 const [data, setData] = useState([])
 const [isDrawerVisible, setDrawerVisible] = useState(false)
 // 3.table列表的变量
 const { Column } = Table;
 // 4.分页总数
 const [total, setTotal] = useState(null)
 // 5.导出变量
 const [filterParam, setFilterParam] = useState({
 causeCode: '',
 rcNum: ''
 });
 // 6.分页参数 当前页以及当前展示页数
 const [pageIndex, setPageIndex] = useState(1)
 const [pageSize, setPageSize] = useState(10)
 // 7.两个搜索框的参数
 const [causeCode, setCauseCode] = useState('')
 const [rcNum, setRcNum] = useState('')
 // 获取列表数据方法
 const getData = async (pageIndex,pageSize,causeCode,rcNum) => {
 const reqParams = {
         page: {
         pageIndex: pageIndex,
         pageSize: pageSize
         },
         causeCode: causeCode || '',
         rcNum: rcNum || ''
         }
 setLoading(true)
 const result = await getCapacityReasonList(reqParams)
 setLoading(false)
 if (result.code === 0) {
 setData(result.data.dataList)//data拿到列表数据
 setTotal(result.data.pageInfo.totalCount)//总数给total
 setPageIndex(result.data.pageInfo.pageIndex)//当前页给pageIndex
 }
 }
 // 更新 
 const [formData, setFormData] = useState(null)
 const [id, setId] = useState(null)
 const handleUpdate = async (record) => {
 setResetForm(false);
 setId(record.id)
 setDrawerVisible(true);
 setFormData({
 rcNum: record.rcNum,
 causeCode: record.causeCode,
 cause: record.cause,
 remark: record.remark
 })
 console.log('填充数据成功', formData);

 };
 // 新增
 const [resetForm, setResetForm] = useState(false);
 const handleAdd = async () => {
 setDrawerVisible(true);
 setResetForm(true);
 setId(null)
 }
 // 提交
 const handleSubmit = async (formData) => {
 // 更新
 if (id && id !== '') {
 console.log(id, 'id');
 console.log(formData, 'formData');
 setLoading(true)
 const result = await addOrUpdateCapacityReason({ ...formData, id })
 setLoading(false)
 if (Number(result.code) === 0) {
 setData(result.data?.dataList)
 setDrawerVisible(true);
 } else {
 message.error(result.message || '接口出错')
 }
 console.log('更新');
 getData()
 // console.log(result, '更新数据啊啊啊啊啊啊啊');
 }
 else {
 setLoading(true)
 const result = await addOrUpdateCapacityReason({ ...formData })
 setLoading(false)
 setData(result.data.dataList)
 console.log('新增');
 getData(pageIndex, pageSize, causeCode, rcNum)
 }
 setDrawerVisible(false);
 setId(null)
 };
 // 导出
 const handleExport = async () => {
 const options = {
 responseType: 'blob',
 getResponse: true,
 };
 const param = {
 causeCode: filterParam.causeCode,
 rcNum: filterParam.rcNum
 }
 setLoading(true)
 const result = await exportCapacityReason(param, options);
 setLoading(false)
 downLoadFile(result)
 }
 // 删除 
 const deleteList = async (id) => {
 console.log(id, '删除的id');
 setLoading(true)
 const newData = await deleteCapacityReason({ id })
 setLoading(false)
 console.log('删除成功');
 getData()
 }
 // 分页
 const onChange = (pageIndex, pageSize) => {
 setTotal(total)
 setPageIndex(pageIndex)
 setPageSize(pageSize)
 console.log(pageIndex, '分页');
 getData(pageIndex, pageSize)
 }
 // 搜索
 // const [rcNum, setRcNum] = useState(null)
 const [searchResults, setSearchResults] = useState([])
 const handleChange = async (event) => {
 const rcNum = event.target.value
 setRcNum(rcNum)
 getData(pageIndex, pageSize, causeCode, rcNum)
 }

 const [searchCauseResults, setSearchCauseResults] = useState([])
 const handleCauseChange = async (event) => {
 const causeCode = event.target.value
 setCauseCode(causeCode)
 getData(pageIndex, pageSize, causeCode)
 }
 useEffect(() => {
 getData()
 console.log(pageIndex, 'pageIndex');
 }, [])
 return (
 <div>
 <PageContainer >
 <span style={{ marginRight: '8px' }}>RC#</span>
 <Space direction="vertical" size="middle">
 <Input placeholder="请输入" onChange={handleChange} />
 </Space>
 <span onClick={getData} style={{ margin: '0px 8px 0px 16px' }}>原因代码</span>
 <Space direction="vertical" size="middle">
 <Input placeholder="请输入" onChange={handleCauseChange} />
 </Space>
 <Button onClick={() => handleAdd()}>新增</Button>
 <Button onClick={() => handleExport()}>导出</Button>
 </PageContainer>
 <Table
 loading={loading}
 dataSource={data}
 pagination={false}
 rowKey={(record) => record.id} >
 <Column title="RC#" dataIndex="rcNum" key="rcNum" width={200} />
 <Column title="原因代码" dataIndex="causeCode" key="causeCode" width={200} />
 <Column title="代码" dataIndex="cause" key="cause" width={260} />
 <Column title="备注" dataIndex="remark" key="remark" width={100} />
 <Column
 title="操作"
 width={100}
 render={(_, record) => (
 <Space size="middle">
 <a onClick={() => handleUpdate(record)}>更新</a >
 <a onClick={() => deleteList(record.id)}>删除</a >
 </Space>
 )}
 />
 </Table>
 <Pagination total={total} onChange={onChange} current={pageIndex} pageSize={pageSize} />
 <DrawerIndex handleSubmit={handleSubmit} resetForm={resetForm} visible={isDrawerVisible} formData={formData} onClose={() => setDrawerVisible(false)} />
 </div>
 )
}

子组件

子组件
import React, { useEffect, useState } from 'react'
import { Button, Col, Drawer, Form, Input, Row } from 'antd';
export default function DrawerIndex({ visible, onClose, handleSubmit,formData, resetForm}) {
 // console.log("formData",formData);
 const [form] = Form.useForm();
 const onFinish = (formData) => {
 handleSubmit(formData);
 console.log(formData, '222');
 };
 console.log(resetForm, 'resetForm');
 useEffect(()=>{
 if(formData){
 form.setFieldsValue(formData)
 console.log(formData, '子组件拿到了');
 }
 if (resetForm) {
 form.resetFields(); // 如果 resetForm 变为 true，则重置表单
 }
 console.log(resetForm, 'use');

 }, [formData, resetForm])

 return (
 <div>
 <Drawer
 title="更新产能原因"
 width={480}
 onClose={onClose}
 visible={visible}
 >
 <Form layout="vertical" onFinish={onFinish} form={form}>
 <Row gutter={16}>
 <Col span={12}>
 <Form.Item
 name="rcNum"
 label="RC#"
 rules={[
 {
 required: true,
 message: 'Please enter user',
 },
 ]}
 >
 <Input placeholder="Please enter user" />
 </Form.Item>
 </Col>
 <Col span={24}>
 <Form.Item
 name="causeCode"
 label="原因代码"
 rules={[
 {
 required: true,
 message: 'please enter url description',
 },
 ]}
 >
 <Input.TextArea rows={4} placeholder="please enter url description" />
 </Form.Item>
 </Col>
 <Col span={24}>
 <Form.Item
 name="cause"
 label="定义"
 rules={[
 {
 required: true,
 message: 'please enter url description',
 },
 ]}
 >
 <Input.TextArea rows={4} placeholder="please enter url description" />
 </Form.Item>
 </Col>
 <Col span={24}>
 <Form.Item
 name="remark"
 label="备注"
 rules={[
 {
 required: true,
 message: 'please enter url description',
 },
 ]}
 >
 <Input.TextArea rows={4} placeholder="please enter url description" />
 </Form.Item>
 </Col>
 </Row>
 <Form.Item>
 <Button onClick={onClose}>取消</Button>
 <Button type="primary" htmlType='submit'>
 提交
 </Button>
 </Form.Item>
 </Form>
 </Drawer>
 </div>
 )
}

代码贴上去了，说一下大概思路：

对于获取列表数据，首先：定义一个getData方法，在这个方法里面我们需要做的一个事就是调用请求列表的接口，那么请求列表的接口有四个参数，分别是pageIndex, pageSize, causeCode, rcNum，所以我们需要定义存储这四个参数的变量，调用接口拿到的页码总数，数据列表，当前页都分别给对应的变量 即：

定义变量
 const [loading, setLoading] = useState(true)
// 列表数据
 const [data, setData] = useState([])
// 分页总数
 const [total, setTotal] = useState(null)
// 分页参数 当前页以及当前展示页数
 const [pageIndex, setPageIndex] = useState(1)
 const [pageSize, setPageSize] = useState(10)
// 两个搜索框的参数
 const [causeCode, setCauseCode] = useState('')
 const [rcNum, setRcNum] = useState('')

 获取列表数据方法
 const getData = async (pageIndex,pageSize,causeCode,rcNum) => {
 const reqParams = {
         page: {
         pageIndex: pageIndex,
         pageSize: pageSize
         },
         causeCode: causeCode || '',
         rcNum: rcNum || ''
         }
 setLoading(true)
 const result = await getCapacityReasonList(reqParams)
 setLoading(false)
 if (result.code === 0) {
 setData(result.data.dataList)//data拿到列表数据
 setTotal(result.data.pageInfo.totalCount)//总数给total
 setPageIndex(result.data.pageInfo.pageIndex)//当前页给pageIndex
 }
 }

useEffect(() => {
 getData()
 console.log(pageIndex, 'pageIndex');
 }, [])

第二个功能实现新增与修改

当我点击新增按钮的时候

一个是需要重置表单，通过resetForm来为true来重置表单

一个是使用isDrawerVisible去控制弹窗的打开

父组件
 新增
 const [resetForm, setResetForm] = useState(false);
 const handleAdd = async () => {
 setDrawerVisible(true);
 setResetForm(true);
 setId(null)//清除多余的id
 }
 子组件
 if (resetForm) {
            form.resetFields(); // 如果 resetForm 变为 true，则重置表单
        }

当点击更新按钮的时候，需要保存当前的id,存起来，然后把当前的值填充表单（要传给子组件）， }

父组件
 更新 
 const [formData, setFormData] = useState(null)
 const [id, setId] = useState(null)
 const handleUpdate = async (record) => {
 setResetForm(false);
 setId(record.id)
 setDrawerVisible(true);
 setFormData({
 rcNum: record.rcNum,
 causeCode: record.causeCode,
 cause: record.cause,
 remark: record.remark
 })

之后把formData传给子组件

    const [form] = Form.useForm();
    // 表单验证成功之后触发，表单验证成功之后就调用父组件传过来的方法，也就是提交方法
    const onFinish = (formData) => {
        handleSubmit(formData);
    };
    useEffect(()=>{
        if(formData){
        //设置表单字段的值
            form.setFieldsValue(formData)
        }
    }, [formData, resetForm])

提交就是通过之前存的id判断，id存在并且不是空的话，就是更新，当前的id给formData,并且刷新数据setData(),再次调用getData显示列表

    提交
    const handleSubmit = async (formData) => {
        // 更新
        if (id && id !== '') {
            setLoading(true)
            const result = await addOrUpdateCapacityReason({ ...formData, id })
            setLoading(false)
            if (Number(result.code) === 0) {
                setData(result.data?.dataList)
                setDrawerVisible(true);
            } else {
                message.error(result.message || '接口出错')
            }
            console.log('更新');
            getData()
            // console.log(result, '更新数据啊啊啊啊啊啊啊');
        }
        else {
            setLoading(true)
            const result = await addOrUpdateCapacityReason({ ...formData })
            setLoading(false)
            setData(result.data.dataList)
            console.log('新增');
            getData(pageIndex, pageSize, causeCode, rcNum)
        }
        setDrawerVisible(false);
        setId(null)
    };

删除就很简单，直接拿到当前id传参数给接口就可以

  const deleteList = async (id) => {
        setLoading(true)
        const newData = await deleteCapacityReason({ id })
        setLoading(false)
        getData()
    }

而搜索就是拿到当前的值作为rcNum传参数给接口，当前值就是event.target.value

    const handleChange = async (event) => {
        const rcNum = event.target.value
        setRcNum(rcNum)
        getData(pageIndex, pageSize, causeCode, rcNum)
    }

另外一个搜索就不写了，同样的意思 导出也是，直接调用接口传参数就好了 还有一个分页功能

const onChange = (pageIndex, pageSize) => {
        setTotal(total)
        setPageIndex(pageIndex)
        setPageSize(pageSize)
        console.log(pageIndex, '分页');
        getData(pageIndex, pageSize)
    }
    //return里面的
<Pagination total={total} onChange={onChange} current={pageIndex} pageSize={pageSize} />