AntD表单自定义组件

前言

表单可以说是前端最常见的一种组件，特别是在进行搜索的时候使用的最频繁，自定义表单组件，丰富了搜索框的类型，使数据展现的更灵活

内容讲解

1、官方介绍

AntD-Formhttps://ant.design/components/form-cn#form-demo-customized-form-controls

2、使用讲解

父组件

父组件非常简单，就是使用<Form.Item>包裹着自定义的组件就可以了

<Form.Item name="dataIds" className="tag-input-box"><TagListshowName="序号"/>
</Form.Item>

子组件

子组件也就是自定义组件，相对父组件而言有两点需要注意

1、接受两个参数value和onChange

2、value为父组件传递的值，onChange将新值传递给父组件

const {value,onChange
} = props;// 接收
const [tagList, setTagList] = useState<any>(value || []);//传递
onChange(tagList);

案例