antd form表单中嵌套自定义组件

wuliCaibao

于 2022-03-03 17:14:08 发布

阅读量3.7k

点赞数

文章标签：前端 react

本文链接：https://blog.csdn.net/wuliCaibao/article/details/123255735

版权

本文介绍了如何在antd的form表单中嵌套自定义组件，并实现表单元素的校验和数据操作。通过Promise或callback进行异步校验，自定义组件接收value和onChange方法，实现表单数据的展示和更新。

摘要由CSDN通过智能技术生成

前言

当某些自定义的组合类组件，也希望能进行表单元素的校验，以及利用antd的form表单实例进行数据的修改或者数据获取，这招便可以派上用场啦~

表单部分

<Form.Item label="周期" labelAlign="right">
    {
   getFieldDecorator('cycle', {
   
        rules: [{
    required: true, validator: checkCycle }],
        initialValue: cycle,
    })(<CycleInput cycleOptions={
   cycleOptions} />)}
</Form.Item>

表单部分可以引入自定义的校验逻辑，如上面的checkCycle ：
可以像下面这样，通过Promise.reject()返回错误校验提示，通过Promise.resolve()正确通过校验。

/** 校验生命周期输入内容 */
const checkCycle = useCallback((_, value) => {
   
     const format = value?.split(' ');
     if (!format) return Promise.reject(new Error('周期不可为空!'));

     /** always 永久保存选项 */
     if (format.length < 2 && format[0] === 'always') {
   
         return Promise.resolve();