首页 学海无涯 Web前端 解决Ant Design Pro中搜索表单和弹出表单id重复问题
解决Ant Design Pro中搜索表单和弹出表单id重复问题
摘要 ProTable自带搜索表单,当我们使用ModalForm组件,在Table页面做创建和修改的弹出表单时,如果表单字段的name相同的话,浏览器就会警告:Found 2 elements with non-unique id。

在Ant Design Pro框架的ProTable和ModalForm使用中遇到搜索表单和ModalForm表单中字段id重复的问题:

ProTable自带搜索表单,当我们使用ModalForm组件在Table页面做创建和修改的弹出表单时,如果表单字段的name相同的话,浏览器就会警告:Found 2 elements with non-unique id。原因是ProTable自带的搜索表单中输入框和ModalForm中输入框的id相同,而同一个页面的HTML元素的id不能重复。

但是我们并没有配置输入框的id的选项,这个id默认是根据name生成的,而我们相同字段的name属性通常是相同的,也就是说我们的需求就是要name属性相同的情况下id属性不同,如何解决这个问题呢?

很简单,随便设置一个ModalForm的name属性值即可:

设置ModalForm的name属性后,ModalForm中输入框的id就会将name的值作为前缀:

问题解决!

版权声明:本文由不落阁原创出品,转载请注明出处!

本文链接:http://www.leo96.com/article/detail/80

广告位

来说两句吧
最新评论

暂无评论,大侠不妨来一发?