上海集团网站建设公司好,网站建设金手指专业,网站开发公司广告文案,廊坊建设部网站一、概述
Antd是一个非常强大的UI组件库#xff0c;里面的Form表单组件也基本能满足我们大多数场景。但是也有需要自定义表单的场景。 Vue2里我们使用v-model#xff0c;结合子组件的model属性#xff0c;来实现自定义组件的双向绑定。 Vue3里我们使用v-model#xff0c;…一、概述
Antd是一个非常强大的UI组件库里面的Form表单组件也基本能满足我们大多数场景。但是也有需要自定义表单的场景。 Vue2里我们使用v-model结合子组件的model属性来实现自定义组件的双向绑定。 Vue3里我们使用v-model结合子组件的update:modelValue来实现同样功能。 到了ReactAntd中我们采用引用父组件默认传入onChange事件子组件调用来实现。
二、开发实现
1、代码
父组件代码
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] useStateObject({});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)}FormonFinish{onFinish}onValuesChange{(changedValues, allValues) { setFormData(allValues) }}form{form}labelAlignrightinitialValues{initData}style{{marginTop: 50px}}{...layout}Form.Item nametitle label标题Input //Form.ItemForm.Item nameitem1 label自定义项MyBtns //Form.ItemForm.Item wrapperCol{{ offset: 3, span: 21 }}Space sizemiddleButton htmlTypebutton onClick{onReset}取消/ButtonButton typeprimary htmlTypesubmit提交/Button/Space/Form.Item/Form/div
}export default Index;子组件(myBtns.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 SpaceButton type{getTypeClass(选项1)} onClick{() onSelected(选项1)}选项1/ButtonButton type{getTypeClass(选项2)} onClick{() onSelected(选项2)}选项2/ButtonButton type{getTypeClass(选项3)} onClick{() onSelected(选项3)}选项3/Button/Space
}export default myBtns;2、最终效果 可以看到表单中有两个选项第一个是Input组件第二个是自定义组件MyBtns已经实现数据的事实更新。
3、原理
Form.Item 在渲染时会注入 value 与 onChange 事件给子元素。
valueform.item对应的name属性的值,可用作默认值以及返显onChange用于监听value元素值的变化,并将其传给form.item使其可以通过相关api获得其值 注意当你的字段组件被包裹时属性将无法传递。所以以下代码是不会生效的 Form.Item nameinputdivh3I am a wrapped Input/h3Input //div
/Form.Item
