【Ant Design】Form.Item创建自定义表单

一、概述

Antd是一个非常强大的UI组件库,里面的Form表单组件也基本能满足我们大多数场景。但是也有需要自定义表单的场景。

  • Vue2里我们使用v-model,结合子组件的model属性,来实现自定义组件的双向绑定。

  • Vue3里我们使用v-model,结合子组件的update:modelValue来实现同样功能。

  • 到了React+Antd中,我们采用引用父组件默认传入onChange事件,子组件调用来实现。

二、开发实现

1、代码

父组件代码:

tsx 复制代码
import { Button, Space, Form, Input, Radio, Switch } from "antd";
import MyBtns from "./components/myBtns";
import { useState, useEffect } from "react";

function Index() {
    const [form] = Form.useForm();
    const [formData, setFormData] = useState<Object>({});

    const layout = {
        name: "myFrom",
        autoComplete: "off",
        labelCol: {
            span: 3,
        },
        wrapperCol: {
            span: 21,
        }
    };
    const initData = {
        title: "IT飞牛的自定义表单",
        item1: "选项-2",
    };

    const onFinish = async (values: Object) => {
        //提交数据
        //...
    }
    const onReset = () => {
        form.resetFields();
    };
    useEffect(() => {
        setFormData(initData);
    }, [])

    return <div>
        {JSON.stringify(formData)}
        <Form
            onFinish={onFinish}
            onValuesChange={(changedValues, allValues) => { setFormData(allValues) }}
            form={form}
            labelAlign="right"
            initialValues={initData}
            style={{
                "marginTop": "50px"
            }}
            {...layout}
        >
            <Form.Item name="title" label="标题">
                <Input />
            </Form.Item>
            <Form.Item name="item1" label="自定义项">
                <MyBtns />
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 3, span: 21 }}>
                <Space size="middle">
                    <Button htmlType="button" onClick={onReset}>
                        取消
                    </Button>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    </div >
}

export default Index;

子组件(myBtns.tsx)代码:

tsx 复制代码
import { Button, Space } from "antd";

const myBtns = (props: any) => {
    const { value, onChange } = props //value 是form表单中"name"对应的字段值

    const onSelected = (val: string) => {
        onChange(val)
    }

    const getTypeClass = (val: string) => {
        return value == val ? "default" : "dashed";
    }

    return <Space>
        <Button type={getTypeClass("选项1")} onClick={() => onSelected("选项1")}>选项1</Button>
        <Button type={getTypeClass("选项2")} onClick={() => onSelected("选项2")}>选项2</Button>
        <Button type={getTypeClass("选项3")} onClick={() => onSelected("选项3")}>选项3</Button>
    </Space>
}

export default myBtns;

2、最终效果

可以看到,表单中有两个选项,第一个是Input组件,第二个是自定义组件MyBtns,已经实现数据的事实更新。

3、原理

Form.Item 在渲染时会注入 valueonChange 事件给子元素。

  • value:form.item对应的name属性的值,可用作默认值以及返显
  • onChange:用于监听value元素值的变化,并将其传给form.item使其可以通过相关api获得其值

注意:当你的字段组件被包裹时属性将无法传递。所以以下代码是不会生效的:

tsx 复制代码
<Form.Item name="input">
  <div>
    <h3>I am a wrapped Input</h3>
    <Input />
  </div>
</Form.Item>
相关推荐
别拿曾经看以后~13 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死16 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试19 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人28 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人28 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR34 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香36 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969338 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai44 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter