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

精选原创

三线码工 2024-08-30 07:51:31 ©著作权

文章标签 表单 Data react 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者三线码工的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

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

技术栈

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

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

form.setFieldsValue({
     ... userData.data
})

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

form.getFieldValue('nickname')

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

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

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

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

const onReset = () => {
      form.resetFields();
};

示例代码解析

导入必要的组件

import React, { useEffect, useState } from 'react';
import { Tabs, Button, Form, Input, Select, Space } from 'antd';

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

2.定义表单布局

const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 4,
    span: 16,
  },
};

创建表单组件

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>
  );
};