在现代Web应用开发中，表单是与用户交互的重要组成部分。本文将介绍如何使用React结合Ant Design库来创建一个动态且响应式的用户表单界面。此示例中的表单允许用户输入基本信息，并通过选项卡切换不同的表单页面。

使用React和Ant Design构建用户表单_Data

技术栈
  • React: 用于构建用户界面的JavaScript库。
  • Ant Design: 一套企业级UI设计语言和React组件库。

设置表单默认值 form.setFieldsValue()

form.setFieldsValue({
     ... userData.data
})
  • 1.
  • 2.
  • 3.

获取单个表单内容 form.getFieldValue()

form.getFieldValue('nickname')
  • 1.

提交表单，获取所有表单内容 onFinish

<Form onFinish={onFinish}></Form>

 const onFinish = (values) => {
      console.log(values);
 };
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

重置表单内容 orm.resetFields();

const onReset = () => {
      form.resetFields();
};
  • 1.
  • 2.
  • 3.
示例代码解析
  1. 导入必要的组件
import React, { useEffect, useState } from 'react';
import { Tabs, Button, Form, Input, Select, Space } from 'antd';
  • 1.
  • 2.

导入React基础库以及Ant Design提供的组件。

2.定义表单布局

const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 4,
    span: 16,
  },
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

创建表单组件

const UserForm = (userData) => {
  // 状态管理
  const [user, setUser] = useState(userData?.data);
  const [form] = Form.useForm();
  
  // 响应式更新数据
  useEffect(() => {
    setUser(userData.data);
    form.setFieldsValue({ ...userData.data });
  }, [userData.data, form]);
  
  // 表单提交处理
  const onFinish = (values) => {
    console.log(values);
  };
  
  // 重置表单
  const onReset = () => {
    form.resetFields();
  };
  
  // 性别选择变化时的操作
  const onGenderChange = (value) => {
    switch (value) {
      case 0:
        form.setFieldsValue({
          nickname: `*${form.getFieldValue('nickname')}*`
        });
        break;
    }
  };
  
  return (
    <div>
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} style={{ maxWidth: 600 }}>
        ...
        <Form.Item {...tailLayout}>
          <Space>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 使用useState管理表单数据。
  • 利用useEffect监听外部数据源的变化并更新表单值。
  • 定义表单提交逻辑。
  • 实现表单重置功能。
  • 根据用户选择的性别动态改变昵称显示方式。

通过上述代码，我们创建了一个具有选项卡切换功能的动态表单，它能够根据用户的输入做出响应，并支持数据的保存与重置操作。这样的设计不仅提高了用户体验，还使得表单更加灵活多变。