美文网首页
antdesign表单中遇到的坑

antdesign表单中遇到的坑

作者: Jessiewu_e94b | 来源:发表于2020-03-10 19:43 被阅读0次

antdesign Modal发现有个很鸡肋的功能,最开始以为是自己的代码有问题,仔细检查一番没发现,去官方文档看demo,发现同样的问题

就是如果Modal弹窗为可见的,按下enter会发现什么也没发生,似乎很正常,

但是关闭弹窗,轻按enter键,神奇的一幕出现了,弹窗居然再次出现了。

本次项目最终发布后是iframe嵌入其他系统的,偶然发现按下enter,页面会自动刷新,应该是其他系统监听了enter事件,然后刷新了页面,个人觉得不合理,这是外话。主要是测试发现当Modal弹窗打开,填写完唯一的邮箱输入框,按下enter,发现页面一片空白,(虽然很懵逼,但是猜到是IE兼容问题)后面带着不可思议的心情,定位问题,偶然发现Modal的这个问题。

    另外,Modal内部有个Input填写邮箱输入框,当时没注意,在外面加了一个form,未添加action和submit事件,按照开发惯性,自测没发现问题,ST也OK。

    但是到了UAT阶段,测试在输入邮箱后点击enter,这个时候form会把emai添加到当前路径,导致地址里面会多出?email=xxxx,所以这段路径在IE上出了问题,导致一片空白。

总结,form最好用antdesign里的组件,表单录入一定记得加上enter事件。

相关文章

  • antdesign表单中遇到的坑

    antdesign Modal发现有个很鸡肋的功能,最开始以为是自己的代码有问题,仔细检查一番没发现,去官方文档看...

  • AntDesign表单验证

    在实现输入错误或者为空的情况下 如下图(有错误提示,不可提交) ok直接上代码吧

  • antDesign + react表单验证注意事项

    我们先用下面的代码实现一下我们要求的表单: 对于表单验证在antdesign里面有非常详细的描述,我主要描述的是对...

  • AntDesign Form表单栅格

    需要实现的效果: 表单布局: 栅格计算: 页面宽度 xs 尺寸时,整行铺满,所以都设置为 24 页面宽度 sm 尺...

  • AntDesign Form表单字段校验

    转载自:AntDesign Form表单字段校验的三种方式(侵删) 1.使用getFieldDecorator的r...

  • elementUI中表单验证遇到的坑

    我现在要实现这样一个效果,一个下拉框,一个input框,这两个框都需要校验,并且下拉框的数据是从后台获取的,是这样...

  • iOS开发中遇到过的坑

    iOS开发中遇到过的坑 iOS开发中遇到过的坑

  • Element ui: form表单使用

    初次使用Element ui,遇到不少坑。在此做些记录,方便日后查阅。 form 表单赋值/取值 取值:获取 fo...

  • React AntDesign

    AntDesign介绍 AntDesign ,简称 antd 是基于 Ant Design 设计体系的 React...

  • React(九)—— 操作表单

    React的表单应用是有一些小坑的,练习的时候也是遇到了很多,希望这边能帮助到大家 在写表单之前写一个基础方法,b...

网友评论

      本文标题:antdesign表单中遇到的坑

      本文链接:https://www.haomeiwen.com/subject/dkvgdhtx.html