交互实践案例：Ant Design Table 和 Form 组件共用，实现数据验证、新增行和删除行

2024-01-22 10:02:09

使用 Ant Design 构建可验证表单驱动的表格

在日常开发任务中，开发人员经常需要创建允许用户与表格数据交互的界面。此类界面通常需要满足三个关键要求：

表格中的每一项数据都应经过验证，以确保输入的准确性和一致性。
用户应该能够轻松地添加新行并从表格中删除现有行。
表格和表单的整体设计和样式应直观且用户友好。

Ant Design，一个流行的 React UI 组件库，提供了强大的组件，可以帮助开发者有效地实现这些要求。本文将详细介绍如何使用 Ant Design 的 Table 和 Form 组件构建一个功能强大的可验证表单驱动的表格。

表格数据结构

第一步是定义一个数据结构来存储表格数据。此数据结构可以是一个简单的数组，也可以是一个包含更多复杂对象的更高级别结构。例如，我们可以定义一个如下所示的表格数据结构：

const data = [
  {
    key: '1',
    name: 'John Doe',
    age: 30,
    address: '123 Main Street',
  },
  {
    key: '2',
    name: 'Jane Doe',
    age: 25,
    address: '456 Elm Street',
  },
  {
    key: '3',
    name: 'Peter Jones',
    age: 40,
    address: '789 Oak Street',
  },
];

表格组件

接下来，我们需要创建一个表格组件来显示数据。Ant Design 的 Table 组件是一个功能丰富的选择，它提供了分页、排序、过滤等功能。我们可以如下创建表格组件：

import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const MyTable = () => {
  return (
    <Table
      columns={columns}
      dataSource={data}
    />
  );
};

表单组件

下一步是创建一个表单组件来对表格数据进行验证。Ant Design 的 Form 组件提供了丰富的表单元素，包括输入框、下拉框、单选框等。我们可以如下创建表单组件：

import { Form, Input, Select, Button } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log(values);
  };

  return (
    <Form
      form={form}
      onFinish={onFinish}
    >
      <Form.Item
        label="Name"
        name="name"
        rules={[{ required: true, message: 'Please input your name!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Age"
        name="age"
        rules={[{ required: true, message: 'Please input your age!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Address"
        name="address"
        rules={[{ required: true, message: 'Please input your address!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

集成表格和表单组件

最后，我们将表格组件和表单组件集成到一个完整的页面中。我们可以使用 Ant Design 的 Row 和 Col 组件来实现此目的。

import { Row, Col } from 'antd';

const MyPage = () => {
  return (
    <Row>
      <Col span={12}>
        <MyTable />
      </Col>
      <Col span={12}>
        <MyForm />
      </Col>
    </Row>
  );
};