如何使用Material UI卡将按钮连接到表单提交？
Material-UI 是一个用于 React 应用程序的流行的 UI 组件库，它提供了丰富的预定义组件和样式，可以帮助开发人员快速构建美观的用户界面。
要将按钮连接到表单提交，你可以按照以下步骤进行：
- 首先，确保你的项目中已经引入了 Material-UI 的库文件。你可以使用 npm 或 yarn 进行安装，并在代码中导入所需的组件。例如：
- 首先，确保你的项目中已经引入了 Material-UI 的库文件。你可以使用 npm 或 yarn 进行安装，并在代码中导入所需的组件。例如：
- 创建一个包含表单的组件，并在 JSX 中使用
TextField组件来渲染输入框。例如： - 创建一个包含表单的组件，并在 JSX 中使用
TextField组件来渲染输入框。例如： - 在表单组件中定义一个提交处理函数
handleSubmit，该函数将被触发当用户点击提交按钮时。例如： - 在表单组件中定义一个提交处理函数
handleSubmit，该函数将被触发当用户点击提交按钮时。例如： - 在
handleSubmit函数中，你可以通过获取输入框的值，执行验证和其他操作。例如： - 在
handleSubmit函数中，你可以通过获取输入框的值，执行验证和其他操作。例如：
这样，当用户点击提交按钮时，表单将触发 handleSubmit 函数，并且你可以在其中获取表单数据，执行相应的操作。
值得注意的是，Material-UI 的按钮组件为 Button，文本输入框组件为 TextField，你可以根据自己的需求进行定制和调整。此外，Material-UI 还提供了更多的组件和样式选项，可根据具体场景进行使用。
如果你希望了解更多关于 Material-UI 的信息，你可以访问腾讯云的文档页面，了解相关的产品和使用方法：Material-UI 组件库 - 腾讯云
相关·内容
我有一个简单的表单，它位于一个重要的ui Card组件中...import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';import CardActions from '@material-ui/core/
浏览 26提问于2020-01-22得票数 0
回答已采纳
我正在尝试一个使用Material UI组件的简单redux表单。按照他们页面上的例子，很容易获得redux Field组件，渲染为material-ui字段？但是，我希望使用material-ui按钮作为表单的提交和重置按钮，而不仅仅是标准的HTML。尽管我花了很长时间寻找并尝试了一些东西，但我还是不能让它工作。是否可以使用materi
浏览 1提问于2016-11-22得票数 0
2回答
我正在用Formik创建一个带有Materail UI的登录表单，但是Formik不能识别Button of Material UI。如果我用html按钮替换Button，一切都会正常工作。下面是我的代码：import TextField from "@material-ui/core/TextField{ makeStyles
浏览 14提问于2021-06-02得票数 0
回答已采纳
我正在尝试找出是否有可能绕过表单/ DocuSign的显示，并将表单提交按钮附加到DocuSign UI上的"Sign“选项卡操作。以下是我们提出的流程：2)如果客户已向DocuSign注册，则会自动对表单进行签名，并将其带到我们的感谢页面。谁能告诉我，如果不显示form/DocuSign UI
浏览 3提问于2015-08-29得票数 0
这是我的目标:在登录卡中有一个“新用户”按钮，它将被点击，卡将被更改为注册。登录卡就没了。我在material-UI中所做的一切。 我的代码in codesand 当我点击按钮时，它显示错误。如果我把这个按钮放在卡片外面，我可以使用if-else条件来显示所需的卡片。但是我应该把这个按钮放在登录表单里面。 当我按下Newuser按钮时，它告诉我要使用子数组。我该<
浏览 24提问于2020-05-01得票数 1
回答已采纳
1回答
我有一个jquery对话框，它加载表单，并在submit按钮上提交表单。function () { } });
假设#LogOnForm是一个简单的表单现在，我决定在对话框中使用jquery选项卡，该选项卡加载多个表单，并根据选定的选项卡调用适当的表单</e
浏览 2提问于2014-10-05得票数 0
回答已采纳
正在尝试使用创建窗体向导。
是否可以将表单的每个步骤放在单独的视图中，然后通过jQuery/AJAX选项卡加载每个步骤？当我AJAX加载分部表单时，它无法访问js、css等；因为没有分部文件的‘头’。作为一种变通方法，我将所有的表单放在一个页面上，用<div>s分成多个选项卡，这样就行了，但是关闭了js就没什么意义了(尽管这个应用依赖于js，而且只能在支持js的浏览器中使用)。我使用的是Code
浏览 1提问于2008-10-15得票数 0
我正试图在select模式下将"required“设为TextField。我尝试添加提交属性，但如果我没有选择任何内容，这不会阻止required事件。尽管它在标签上添加了'*‘。在沙箱示例中有Select和Text字段，将文本字段设置为required将阻止提交事件，并显示原生html5错误，显示"this field is required"，如果字段为"select“，则不是这种情况
浏览 2提问于2018-09-02得票数 9
回答已采纳
2回答
我使用jQuery UI选项卡在选项卡中加载外部表单。窗体被设置为在单击窗体中的复选框时提交。表单是使用ajax提交的。我正在搜索答案，是在提交表单后刷新选项卡内容，但我还没有找到答案。</strong></p></div>"); }这些选项卡是使用</
浏览 2提问于2014-01-14得票数 0
回答已采纳
2回答
我想提交一个驻留在jQuery UI选项卡中的表单-我希望操作页面呈现在选项卡中...我能够“拦截”标签中的"a“标签，将这些链接调用到标签中(感谢这里的帮助……)$('#tabs-community').on('click', '.ui-tabs-panel a', function(){
var $panel=$(this).closest('.<e
浏览 2提问于2012-06-19得票数 1
在我的面板头区域的引导面板上，我有一个按钮，可以点击表单<button type="submit" form="form-user-group" class="btn btn-primary">Save在按钮中，我使用form=" form -user-group“，然后在表单上使用id <form id="form-user-group"></form>
浏览 0提问于2015-03-15得票数 0
回答已采纳
3回答
我已经使用Yii2创建了一个CRUD。现在，我已经使用bootstrap 添加了multi-tab
现在我在字段上有一些验证规则，比如required validation。当保存按钮被点击时，它会在活动选项卡上显示错误，但如果在非活动选项卡上有任何错误，它将不会提交表单。如果活动选项卡中有任何错误，用户将通过适当的操作进行更正，但他不会理解其他选项卡上也有任何错误。所以我想要的是，如果其他选项卡中
浏览 2提问于2017-01-28得票数 1
一直在使用尝试在material组件之间传递数据。我将尝试通过链接到当前代码和屏幕截图来复制我想要实现的目标。最后，我创建了一个上下文来管理两个表单之间传递的数据的状态，即AuthStepperContext ()，我将提供程序传递给根()上的主index.js文件。在表单步骤的最后一步，我希望提交</em
浏览 0提问于2020-09-21得票数 1
1回答
我有一个对话框中有输入字段的表单，在用户填写完所有输入后，他可以通过点击对话框底部的“提交”按钮来提交信息。问题是，我不知道如何将提交按钮固定在页脚，所以即使有15+输入，用户也不必一直向下滚动才能看到“提交”按钮。我知道material ui具有用于此目的的DialogActions，但由于对话框位于父组件中，因此我无法从子组件访问DialogActions。/Info
浏览 21提问于2021-03-24得票数 0
3回答
常见的是一个提交，也许是一个重置按钮，就是这样。我不需要每天都要处理这方面的问题，但有时我会这样做。有很多关于表单的内容，但是使用几个按钮是否可以。通过避免在submit按钮上使用复数的方式可以看出，单个表单中的数不符合标准的要求。
因此，这方面是否值得我们担心，以及是否会造成一些问题，我们是十分感激的。链接到参考点将是最好的。谢谢。
浏览 4提问于2017-02-02得票数 0
回答已采纳
最近，当我使用React&material-ui制作表单时，我发现很多组件都没有'name‘属性，比如'SelectField’。所以我必须通过一个方法来获取这个值。material-ui适合实现表单吗？如果答案是肯定的，你能给我一个完整的例子，其中使用了一些组件，如'TextField'，'SelectField'，我如何提交它？
浏览 17提问于2017-07-07得票数 2
我试图在react和Material UI中创建一个简单的确认对话框。我已经让它打开，以响应提交表单。但是，当我试图在对话框中创建一个关闭它的按钮时，当我单击该按钮时没有任何反应。我将打开状态绑定到一个属性，以便可以从父/包含模块中的代码打开对话框。如果有更好的办法，我洗耳恭听。下面是我的组件代码： import React, { Component } from 'react';
import DialogTitle from &#x
浏览 101提问于2020-12-04得票数 0
4回答
带有JQuery UI选项卡小部件和四个选项卡的ASP.NET web表单。当我单击提交按钮时，我想禁用最新的三个选项卡。$( ".selector" ).tabs( { disabled: [1, 2] } );
我不知道如何在服务器端代码中这样做:)
浏览 0提问于2010-08-27得票数 0
回答已采纳
1回答
我在标签(Angular UI)上下文中使用angular作用域遇到了一些问题。 </pane></form>
看看，如果没有标签，如果我提交一个非常基本的表单，我会看到$scope.user是一个对象。由于字段位于窗格(选项卡)中，因此范围不正确。<em
浏览 1提问于2013-04-02得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
