Skip to main content

一步步，带你简单体验全栈开发（三）

· 3 min read
bigBlack

目标：写个列表+表单​

在这个练习中，我们将通过一步步的实践，使用React和Ant Design，实现一个包含增删改查功能的列表和表单。

在这个实践中，我们将创建一个React组件，包含一个用于展示数据的列表，以及一个用于操作数据的表单。通过这个图，我们可以清晰地了解我们要构建的最终目标。

第一步，安装UI库​

首先，我们需要安装Ant Design。执行以下命令进行安装：

npm install antd

然后，在项目中引入所需的样式和组件。

第二步，写一个列表​

创建一个新的React组件，用于展示列表。在这个组件中，我们将使用Ant Design的Table组件。

import React from 'react';
import { Table, Button } from 'antd';

const MyList = ({ data, onDelete, onEdit }) => {
  const columns = [
    // Define your columns based on your data structure
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    // Add more columns as needed
    {
      title: 'Actions',
      key: 'actions',
      render: (text, record) => (
        <span>
          <Button onClick={() => onEdit(record)}>Edit</Button>
          <Button onClick={() => onDelete(record.key)} style={{ marginLeft: 8 }} danger>
            Delete
          </Button>
        </span>
      ),
    },
  ];

  return <Table dataSource={data} columns={columns} />;
};

export default MyList;

第三步，写一个表单​

创建一个新的React组件，用于展示表单。在这个组件中，我们将使用Ant Design的Form和Input组件。

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

const MyForm = ({ onSubmit, onCancel, form }) => {
  const onFinish = (values) => {
    onSubmit(values);
    form.resetFields();
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      form={form}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      layout="vertical"
    >
      <Form.Item label="Name" name="name" rules={[{ required: true, message: 'Please input the name!' }]}>
        <Input />
      </Form.Item>
      <Form.Item label="Age" name="age" rules={[{ required: true, message: 'Please input the age!' }]}>
        <Input />
      </Form.Item>

      {/* Add more form fields as needed */}
      
      {/* Submit and Cancel buttons */}
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button type="default" onClick={onCancel} style={{ marginLeft: 8 }}>
          Cancel
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

第四步，对接接口​

在实际项目中，你需要将列表和表单与后端接口进行对接。使用fetch、axios等工具来发起请求，并在成功后更新列表数据。

总结​

通过这个React + Ant Design练习，我们实现了一个具有增删改查功能的列表和表单。React的组件化和Ant Design的组件库让前端开发更加高效。在实际项目中，你可以根据需要进一步扩展和优化这个基础组件，满足复杂的前端需求。

0%