React项目中的antd，Form和Table如何一起使用

React项目中的antd，Form和Table如何一起使用

在项目中我们可能会遇到单独的表格，单独的表单这样使用。但是稍微复杂一点，如果是表单中存在一个类似于表格的列表，我们能够动态的去增加删除。或者是表格中的每一行中的某一列或者多个列是表单信息，那么我们又应该怎么实现呢？

const [toFormConfigData, setToFormConfigData] = useState([]);
const columns = [
		{
			title: '字段项',
			dataIndex: 'fieldName',
			key: 'fieldName',
			align: 'center',
		},
		{
			title: '是否必填',
			dataIndex: 'requiredFlag',
			key: 'requiredFlag',
			align: 'center',
			render: (text, record, index) => (
				<Checkbox checked={text === 1} onChange={() => handleFiledRequired(text, index)} />
			),
		},
		{
			title: '字段类型',
			dataIndex: 'fieldType',
			key: 'fieldType',
			align: 'center',
			render: (text, record, index) => (
				<Select
					style={{
						width: 200,
					}}
					value={text}
					options={fieldTypeOptions}
					onChange={(value) => handleFiledType(value, index)}
				/>
			),
		},
		{
			title: '操作',
			width: '100',
			align: 'center',
			render: (text, record, index) => {
				return (
					<Space>
						{
							includeShowSetBtn.includes(record.fieldType) &&
							<Button size='small' type='link' onClick={() => handleSetConfig(record, index)}>
								设置
							</Button>
						}
					</Space>
				);
			},
		},
	];
<Table dataSource={toFormConfigData} columns={columns} pagination={false} loading={loading}/>
 
    

上面的列子是在一个表格中使用Form表单。通过动态的改变表格的数据，来达到Form表格的数据更新。

当然你也可以去别的网站上找到不同与这个方法的实现这个需求。

比如：

import { Button, Form, Input, Table } from 'antd'
import React, { useEffect } from 'react'

const About: React.FC = (props: any) => {
    const [form] = Form.useForm()
    const columns: any = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            render: (text: any, record: any, index: number) => {
                return (
                    <Form.Item name={['table', index, 'age']}>
                        <Input placeholder="请输入年龄" />
                    </Form.Item>
                )
            }
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address'
        }
    ]

    useEffect(() => {
        form.setFieldsValue({
            table: [
                {
                    key: '1',
                    name: '胡彦斌',
                    age: 32,
                    address: '西湖区湖底公园1号'
                },
                {
                    key: '2',
                    name: '胡彦祖',
                    age: 42,
                    address: '西湖区湖底公园1号'
                }
            ]
        })
    }, [])

    const onFinish = (values: any) => {
        console.log(values)
        // 打印结果
        /*
            {
                table: [
                {
                    key: '1',
                    name: '胡彦斌',
                    age: 32,
                    address: '西湖区湖底公园1号'
                },
                {
                    key: '2',
                    name: '胡彦祖',
                    age: 42,
                    address: '西湖区湖底公园1号'
                }
            ]
            }

        */
    }
    return (
        <Form form={form} onFinish={onFinish}>
            <Form.Item name="table" valuePropName="dataSource">
                <Table bordered columns={columns} pagination={false} />
            </Form.Item>
            <Form.Item>
                <Button htmlType="submit" type="primary">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    )
}

export { About }