文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >问答首页 >ReactJS，Formik，Bootstrap Modal -从模态按钮提交

问ReactJS，Formik，Bootstrap Modal -从模态按钮提交
EN

Stack Overflow用户
提问于 2020-07-12 23:56:55
回答 1查看 2.6K关注 0票数 1

我的ReactJS应用程序- CodeSandBox链路中有以下结构。我试图通过使用引导模式窗口的一个按钮来提交Formik表单，但是我无法理解如何从树下的两个组件调用表单提交，并将函数组合在一起。

有人能好心地建议一下，这是否是可以实现的？

谢谢!

reactjs
bootstrap-modal
formik
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-13 00:22:49

在FormFields组件中，需要将id添加到窗体中。

代码语言：javascript
运行
AI代码解释
复制
<Form id="fooId">

对于模态按钮，可以添加form和type属性，如：

代码语言：javascript
运行
AI代码解释
复制
<Button
 ...
 type="submit"
 form="fooId"
 ...
/>

表格就会提交。您可以跳过将onClick事件传递给该按钮，并将doSubmit方法传递给FormFields组件中的Formik组件。

码箱

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62871500

复制
相关文章
bootstrap bootstrap-modal.js 模态对话框
网站jquery uihtml
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <button type="button" class="btn btn-danger" data-toggle="modal" data-target=".ex-modal-lg">大模态框</button> <div class="modal fade ex-modal-lg" tabindex="-1" role="dialog" aria-labelledby="largerModal"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header">larger modal header</div> <div class="modal-body"> <img src="img/img.jpg" style="padding: 5px;"> larger modal body</div> <div class="modal-footer">larger modal footer</div> </div> </div> </div> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".ex-modal-sm">小模态框</button> <div class="modal ex-modal-sm" tabindex="-1" role="dialog" aria-labelledby="smallmodal"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header">small modal header</div> <div class="modal-body"> <img src="img/img.jpg" style="padding: 5px;"> small modal body</div> <div class="modal-footer">small modal footer</div> </div> </div> </div> </body> </html>
用户5760343
2019/07/07
3.2K0
bootstrap 中使用modal模态框遮罩颜色加深
bootstrap
使用 bootstrap + jQuery 做一个后台管理系统， 采用load 方法去加载页面。
用户9914333
2022/07/22
1.3K0
Bootstrap 模态框（Modal）插件的基本应用
cssbootstrapjavascript数据结构
通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍，可以在不离开父窗体的情况下进行一些互动和内容的交互。
德顺
2019/11/13
4.6K0
bootstrap bootstrap-modal.js 模态对话框 并获得传值
htmlcssjquery ui网站
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <div class="modal fade" id="qrcode" tabindex="-1" role="dialog" aria-labelledby="information"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button> <h4 class="modal-title">请扫描二维码，完成支付</h4> </div> <div class="modal-body" style="text-align: center"> <p id="message"></p> <img src="" alt="QRCode" id="scan"> </div> </div> </div> </div> <button id="popup" class="btn btn-primary btn-lg btn-block">我弹</button> <script>
用户5760343
2019/07/07
6.5K0
bootstrap模态框之加载页面至modal-boby
其他
思路：使用$("#reserveForm").html(result); result为Ajax请求controller所返回的页面
week
2018/08/27
4.6K0
bootstrap模态框之加载页面至modal-boby
python测试开发django-122.bootstrap模态框(modal)学习
cssjavascripthtml
模态框（Modal）是覆盖在父窗体上的子窗体，使用场景比如：在页面上编辑内容的时候经常需要弹出一个框框，可以编辑字段提交。 点删除按钮的时候，需要弹出二次确认框，这种现页面上的框框就是模态框
上海-悠悠
2021/09/14
2.2K0
【Java 进阶篇】深入了解 Bootstrap 插件
javabootstrapclass表单验证插件
Bootstrap 是一个流行的前端框架，提供了各种强大的插件，用于增强网页和应用程序的功能和交互性。本篇博客将深入介绍 Bootstrap 插件，适用于那些刚刚开始学习前端开发的小白。
繁依Fanyi
2023/10/23
3750
【Java 进阶篇】深入了解 Bootstrap 插件
bootstrap按钮
其他
bootstrap提供了其中按钮样式:默认(.btn-default),主要(.btn-primary),成功(.btn-success),警告(.btn-warning),危险(.btn-danger),信息(.btn-info),链接(.btn-link)其中基础颜色样式按钮.
十月梦想
2018/08/29
1.5K0
解决在bootstrap模态框modal里使用clipboard.js时复制失效
javascriptbootstrap
当我在bootstrap模态框modal中使用clipboard.js时，复制功能不起作用，但是在模态对话框之外的使用却没有任何问题
Xcnte
2021/12/14
2.3K0
python测试开发django-123.bootstrap模态框(modal)垂直居中显示
jquery ui网站bootstrapjavajavascript
bootstrap 模态框默认会在屏幕顶端显示，跟我们的操作习惯不太符合，我们期望显示到屏幕垂直居中的位置。 在最新的 bootstrap4 版本中可以在<div class="modal-dialog"> 上加一个 modal-dialog-centered 属性，来垂直居中显示。 但是大部分用的是bootstrap3 版本，需要自己写javascript脚本来调整位置。
上海-悠悠
2021/09/14
1.1K0
前端之bootstrap模态框
bootstrap
　　简介：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 Modal简介 Modal实现弹出表单 Modal实现删除提示框 其他用法 Bootstrap 模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如
互联网金融打杂
2018/04/03
3.5K0
前端之bootstrap模态框
【Java 进阶篇】Bootstrap 快速入门
javabootstrap表单表格入门
Bootstrap 是一个流行的开源前端框架，它使网页开发更加容易和高效。无论您是一个有经验的开发者还是一个初学者，本文将带您深入了解 Bootstrap，从基础概念到实际示例，以帮助您快速入门这个强大的工具。
繁依Fanyi
2023/10/22
3430
【Java 进阶篇】Bootstrap 快速入门
bootstrap的模态框
其他
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框（Modal）插件</title> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> //样式必须有，可以在这个地址下载 <script src="https:/
ydymz
2018/09/10
1.7K0
bootstrap 按钮组
buttonclassdefaultdropdowntoggle
<div class="btn-group"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <button type="button" class="btn btn-default">按钮 3</button> </div>
用户5760343
2022/01/10
6180
bootstrap 按钮组
Bootstrap学习------按钮
bootstrap
      Bootstrap为我们提供了按钮组的样式,博主写了几个简单的例子，以后也许用的到。 效果如下  代码如下 <!DOCTYPE html> <html> <head> <title
用户1055830
2018/01/18
8450
Bootstrap学习------按钮
bootstrap 模态框 弹出框
cssjquery ui网站html
('#identifier').modal('show') 显示 $('#identifier').modal('hide') 隐藏
用户5760343
2019/07/05
5.1K0
bootstrap 模态框 弹出框
bootstrap 按钮大小
blockbuttonclassimagepng
<div clas="form-group"> <button class="btn btn-lg">btn-lg</button> <button class="btn">btn</button> <button class="btn btn-sm">btn-sm</button> <button class="btn btn-xs">btn-xs</button> <button class="btn btn-block">btn-block</button> </div>
用户5760343
2022/01/10
8120
bootstrap 按钮大小
python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件
bootstrap
前言 Bootstrap 模态框 (modal) 在关闭时，如何触发一些事件?比如重置表单，或者重置表单的校验。 Bootstrap 模态框 (modal) 提供了4个显示和隐藏模态框的事件。这些事件
上海-悠悠
2022/01/10
1.4K0
python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件
yii2基础之modal弹窗的基本使用
bootstrapdatagridviewidentifieryii2
Modal也即是模态窗，通俗的说就是弹窗。是一款bootstrap的js插件，使用效果也是非常好。
botkenni
2019/09/02
2K0
yii2基础之modal弹窗的基本使用
点击加载更多

相似问题

Formik表单未从Modal组件提交

126

React Bootstrap + Formik -单击提交按钮后显示错误

16

Bootstrap Modal表单提交

12

Twitter Bootstrap Modal表单提交

51

Twitter Bootstrap Modal表单提交

15
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档