Ant Design Form.List 可编辑表格使用指南，实现您的个性化数据编辑需求

轻松上手 Form.List：创建可编辑表格的利器

在日常开发中，表格扮演着至关重要的角色，用于展示和编辑数据。Ant Design 强大的组件库提供了 Form.List，一个开箱即用的工具，可以轻松构建可编辑表格，满足我们对数据管理的个性化需求。

Form.List 的基本使用

1. 引入必备依赖项

import { Form, Input, Button } from 'antd';
import { List } from 'antd/lib/form/Form';

2. 创建 Form.List 组件

const EditableFormList = () => {
  const [form] = Form.useForm();
  // 表单提交处理函数
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.List name="names">
        {/* 接收 fields 和操作函数的回调 */}
        {(fields, { add, remove }) => {
          return (
            <div>
              {/* 遍历每个字段 */}
              {fields.map((field, index) => (
                <Form.Item
                  key={field.key}
                  label={`姓名 ${index + 1}`}
                  required={false}
                >
                  {/* 字段名，name 为嵌套结构，firstName/lastName 表示嵌套字段 */}
                  <Form.Item
                    {...field}
                    name={[field.name, 'firstName']}
                    rules={[{ required: true, message: '请输入姓名' }]}
                  >
                    <Input placeholder="请输入姓名" />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    name={[field.name, 'lastName']}
                    rules={[{ required: true, message: '请输入姓氏' }]}
                  >
                    <Input placeholder="请输入姓氏" />
                  </Form.Item>
                  {/* 添加按钮，点击后添加新字段 */}
                  <Button
                    type="primary"
                    onClick={() => {
                      add();
                    }}
                  >
                    添加
                  </Button>
                  {/* 删除按钮，点击后删除当前字段 */}
                  <Button
                    danger
                    onClick={() => {
                      remove(field.name);
                    }}
                  >
                    删除
                  </Button>
                </Form.Item>
              ))}
            </div>
          );
        }}
      </Form.List>

      <Form.Item>
        {/* 表单提交按钮 */}
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

3. 渲染 Form.List 组件

ReactDOM.render(<EditableFormList />, document.getElementById('root'));

实现必填项校验

通过设置 rules 属性，我们可以轻松地为 Form.List 字段添加必填项校验。在上面的示例中，我们在 firstName 和 lastName 字段上设置了 required 规则，以确保提交表单前这两个字段都已填写。

实现自定义动作

Form.List 提供了 actions 属性，允许我们添加自定义动作。在我们的示例中，我们为每个字段添加了两个按钮，一个用于添加新字段，另一个用于删除当前字段。这极大地增强了表格的交互性和灵活性。

结语

Form.List 是一个功能强大的工具，可以为我们的应用程序添加可编辑表格，同时兼顾必填项校验和自定义动作。通过本文的详细介绍，相信你已经掌握了 Form.List 的基本用法和高级功能。

常见问题解答

1. 如何为 Form.List 字段添加提示信息？

可以使用 tooltip 属性来添加提示信息。

<Form.Item {...field} tooltip="请输入有效姓名">
  <Input placeholder="请输入姓名" />
</Form.Item>

2. 如何在 Form.List 中禁用某些字段？

设置 disabled 属性即可禁用字段。

<Form.Item {...field} disabled>
  <Input placeholder="请输入姓名" />
</Form.Item>

3. 如何控制 Form.List 的初始值？

通过 initialValue 属性设置初始值。

<Form.List name="names" initialValue={[{ firstName: 'John', lastName: 'Doe' }]}/>

4. 如何获取 Form.List 中的表单数据？

提交表单后，可以在 onFinish 回调函数中获取表单数据。

const onFinish = (values) => {
  console.log('Received values of form: ', values.names);
};

5. 如何在 Form.List 中添加额外的字段？

使用 extra 属性可以添加额外的字段，例如备注或说明。

<Form.Item {...field} extra="请输入备注">
  <Input placeholder="请输入姓名" />
</Form.Item>