ant4 多个form 验证_ant design同一个页面上弹出的多个modal上的表单,如何实现分别自校验...

正在学习使用ant design的modal和表单,碰到一个问题。

想要达到的效果是父页面上有多个按钮都需要弹出各自的Modal,每个Modal上有Form,有各自的验证内容。

参考了官方例子写了类似下面的代码

父页面中添加NewOneA和NewOneB两个类:

saveAFormRef= (formRef) => {

this.formRef = formRef;

}

saveBFormRef= (formRef) => {

this.formRef = formRef;

}

render() {

return(

<NewOneA

wrappedComponentRef={this.saveAFormRef}

visible={visibleA}

onCancel={this.handleCancelA}

onOK={this.handleOKA}

/>

<NewOneB

wrappedComponentRef={this.saveBFormRef}

visible={visibleB}

onCancel={this.handleCancelB}

onOK={this.handleOKB}

/>

)

}

其中NewOneA 和 NewOneB都是在Modal中的表单

伪代码:

<Modal

visible={

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个使用Vue3 + TypeScript + Ant Design Modal组件的示例代码: ```vue <template> <a-button type="primary" @click="showModal">打开弹框</a-button> <a-modal v-model:visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel"> <p>{{ content }}</p> </a-modal> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { Modal, Button } from 'ant-design-vue'; export default defineComponent({ name: 'MyModal', components: { Modal, Button }, setup() { const visible = ref(false); const title = ref('提示'); const content = ref('这是弹框内容'); const showModal = () => { visible.value = true; }; const handleOk = () => { visible.value = false; // 点击确定按钮后的操作 }; const handleCancel = () => { visible.value = false; // 点击取消按钮后的操作 }; return { visible, title, content, showModal, handleOk, handleCancel, }; }, }); </script> ``` 在这个示例代码中,我们首先引入了Ant DesignModal和Button组件。然后,使用`defineComponent`方法定义了一个名为`MyModal`的组件。在`setup`函数中,我们定义了一些响应式的变量,包括`visible`(控制弹框的显示与隐藏)、`title`(弹框的标题)、`content`(弹框的内容)。接着,我们定义了三个方法,分别是`showModal`、`handleOk`和`handleCancel`。`showModal`方法用于显示弹框,`handleOk`方法和`handleCancel`方法则分别在点击弹框的确定和取消按钮时触发。 最后,在模板中,我们使用Ant Design的Button组件来触发`showModal`方法,使用Ant DesignModal组件来展示弹框。在Modal组件中,我们使用Vue3的语法糖`v-model:visible`来绑定弹框的显示与隐藏状态。同时,我们通过`:title`传递了弹框的标题,通过`@ok`和`@cancel`监听了弹框的确定和取消事件。在弹框的内容中,我们使用了响应式变量`content`来展示弹框的内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值