在使用react+antd实现一个表单的增删改查遇到的问题。

首先大致说一下实现的功能，表单展示，表单的添加，表单的修改，以及表单的删除，搜索等。这里要求修改是根据我们点击某一行，实现高亮并点击修改表单回填从而进行修改数据。

以下为视频效果：

效果

1、表单展示

表单展示毋庸置疑，用到了antd的Table表格

有两个属性dataSource和colums是我们的行和列数据

columns行数据：

 const columns = [
        {
            title: '编号',
            dataIndex: 'id',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render(record, data) {
                return (
                    <div>
                        {record ? <button style={{ border: '0px', padding: '3px 6px', color: '#fff', background: '#a9b9c6' }}>正常</button> : <button style={{ border: '0px', padding: '3px 6px', color: '#fff', background: '#d36749' }}>异常</button>}
                    </div>
                )
            }
        },
        // {
        //     title: 'Age',
        //     dataIndex: 'age',
        //     defaultSortOrder: 'descend',
        //     sorter: (a, b) => a.age - b.age,
        // },
        {
            title: '仓库名称',
            dataIndex: 'addressName',
            filters: [
                {
                    text: '莎朗仓库',
                    value: '莎朗仓库',
                },
                {
                    text: '巧克力',
                    value: '巧克力',
                },
            ],
            onFilter: (value, record) => record.addressName.indexOf(value) === 0,
        },
        {
            title: '所属部门',
            dataIndex: 'dname',
        },
        {
            title: '地区',
            dataIndex: 'city',
        },
        {
            title: '是否默认',
            dataIndex: 'isDefault',
            render(record, data) {
                return (
                    <div>
                        {record ? <button style={{ border: '0px', padding: '3px 6px', color: '#fff', background: '#a9b9c6' }}>未锁定</button> : <button style={{ border: '0px', padding: '3px 6px', color: '#fff', background: '#d36749' }}>已锁定</button>}
                    </div>
                )
            }
        },
        {
            title: '操作',
            dataIndex: 'isDefault',
            render(record, data) {
                return (
                    <div>
                        <span style={{ border: '0px', color: 'red', margin: '0px 7px' }} onClick={del(data.id)}>删除</span>
                    </div>
                )
            }
        },
    ];

dataSource列数据：

 const [data, setData] = useState([
        {
            id: '1',
            status: true,
            cid: '005',
            key: '2',
            name: 'Jim Green',
            dname: '莎朗部门',
            age: 42,
            addressName: '莎朗仓库',
            city: '莎朗',
            isDefault: true,
        },
        {
            id: '2',
            status: true,
            cid: '011',
            key: '1',
            name: 'John Brown',
            age: 32,
            addressName: '贵阳市',
            dname: '贵阳部门',
            city: '贵阳',
            isDefault: true,
        },
        {
            id: '3',
            status: true,
            cid: '008',
            key: '3',
            name: 'Joe Black',
            age: 32,
            addressName: '河南省',
            dname: '河南部门',
            city: '河南',
            isDefault: false,
        },
        {
            id: '4',
            status: false,
            cid: '050',
            key: '4',
            name: 'Jim Red',
            age: 32,
            addressName: '巧克力',
            dname: '巧克力部门',
            city: '巧克力',
            isDefault: true,
        },
    ])

我们在使用时需要通过Table来进行将两个参数获取从而展示数据。

<Table columns={columns} rowKey={record => record.id} onRow={record => {
                return {
                    onClick: () => { setEditForm(record); }, // 点击行
                }
            }} dataSource={filteredData} bordered pagination={{
                total: data.length,
                pageSize: 2,
            }} />

属性：

columns是我们的列数据 datasource是我们的行数据 bordered边框 pagination是我们的分页器

注意！分页器这里的total总条数需要设置和我们数据的条数相同，否则会报错。

pageSize是我们每页条数

rowKey是我们的每一行的key值

onRow可以获取到我们每一行的数据，有单双击事件，点击可以设置获取我们的数据。该方法回调函数可以获取我们所有的条数

2、表单添加修改

这里要注意的是我们的添加修改使用的是一个表单因此我们需要设置一个值来判断我们是添加还是修改

定义modal框，这是我们包裹的添加修改表单的内容

<Modal title="仓库设置" open={ismodal} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    form={form}
                    // initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                // autoComplete="off"
                >
                    <Form.Item
                        label="仓库编码"
                        name="cid"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="仓库名称"
                        name="addressName"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="所属部门"
                        name="dname"
                    >
                        <Cascader options={options} onChange={onChangeCascader} placeholder="请选择部门" />
                        {/* <Select>
                            <Select.Option value="莎朗部门">莎朗部门</Select.Option>
                            <Select.Option value="贵阳部门">贵阳部门</Select.Option>
                            <Select.Option value="河南部门">河南部门</Select.Option>
                            <Select.Option value="巧克力部门">巧克力部门</Select.Option>
                        </Select> */}
                    </Form.Item>
                    <Form.Item
                        label="联系电话"
                        name="phone"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="地址"
                        name="city"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="是否默认"
                        name="isDefault"
                        valuePropName='checked'//坑
                    >
                        <Switch />
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>

这里我们定义了几个值 判断是添加还是修改

    //是否是添加还是修改
    const [isadd, setAdd] = useState(false)
    //判断是否打开modal框
    const [ismodal, setIsModal] = useState(false)
    //这是我们form表单的方法，可以进行表单重置以及回填等。。。
    const [form] = Form.useForm();
    //定义修改表单回填的值
    const [editForm, setEditForm] = useState({})
    //点击搜索按钮的数据
    const [searchQuery, setSearchQuery] = useState('');

当我们点击添加时，这个时候我们打开modal框，并且设置我们判断是添加还是修改的按钮为true表示当前是添加表单

打开表单进行获取表单数据从而实现添加表单的方法

   //点击添加打开表单 并且将modal框展示这时需要重置表单
    const add = () => {
        setIsModal(true);
        setAdd(true)
        form.resetFields()
    }
    //修改按钮
  const edit = () => {
        setAdd(false)
        setIsModal(true)
        form.setFieldsValue(editForm);
    }
//这里是点击submit的按钮，可以判断是添加还是修改从而判断点击是添加还是修改
const onFinish = (values) => {
        if (isadd) {
            //添加逻辑
            console.log('执行添加啦');
            values.id = data.length + 1
            values.status = false
            const newData = { ...values };
            setData([...data, newData]);
            console.log(values);
            setIsModal(false)
        } else {
            //修改逻辑  
            console.log('执行修改啦', values);
            let id = editForm.id
            const updatedData = data.map((item) => {
                if (item.id === id) {
                    return { ...item, ...values };
                }
                return item;
            });
            setData(updatedData);
            setIsModal(false);
        }
    };

这里我们添加通过获取到我们的values值，注意！需要使用数组方法时，由于react需要通过深拷贝来实现数据添加从而展示页面，因此需要进行...将数据展开并且在添加到数据中

修改也是同理的，不过需要通过定义一个表单回填的值，这是从我们table中的onRow方法的单击事件获取到我们定义的数据，从而进行回填，需要使用到form的一个方法form.setFieldsValue()及逆行表单回填数据。

删除方法可以通过，filter方法过滤掉我们的id不为删除的数据

    const del = (id) => {
        return () => {
            setData((prevData) => prevData.filter(item => item.id !== id));
        }
    }

这里我们可以学习到，useState的第二个参数，修改数据时可以调用回调函数，里面的参数是我们的定义的数据，可以用来筛选直接遍历修改数据。

3、表单搜索

    const [searchQuery, setSearchQuery] = useState('');


 const onSearch = (value) => {
        setSearchQuery(value);
    };

    const filteredData = data.filter(item => item.addressName.toLowerCase().includes(searchQuery.toLowerCase()));

<Table columns={columns} rowKey={record => record.id} onRow={record => {
                return {
                    onClick: () => { setEditForm(record); }, // 点击行
                }
            }} dataSource={filteredData} bordered pagination={{
                total: data.length,
                pageSize: 2,
            }} />

定义搜索输入框数据获取的值，从而通过实现受控组件

定义方法获取到我们筛选后的数据

最后切记不要忘记更改我们table中的dataSource属性的值为我们筛选后的值