在React中，如何让onSubmit执行两个操作？
在React中，可以通过以下几种方式让onSubmit执行两个操作：
- 使用回调函数：可以在onSubmit事件处理程序中定义一个回调函数，然后在该函数中执行两个操作。例如：
class MyForm extends React.Component {
handleSubmit = (event) => {
event.preventDefault();
// 执行第一个操作
// ...
// 执行第二个操作
// ...
}
render() {
return (
<form onSubmit={this.handleSubmit}>
{/* 表单内容 */}
<button type="submit">提交</button>
</form>
);
}
}- 使用Promise：可以在onSubmit事件处理程序中返回一个Promise对象，然后在Promise的resolve回调函数中执行第二个操作。例如：
class MyForm extends React.Component {
handleSubmit = (event) => {
event.preventDefault();
// 执行第一个操作
// ...
return new Promise((resolve) => {
// 执行第二个操作
// ...
resolve();
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
{/* 表单内容 */}
<button type="submit">提交</button>
</form>
);
}
}- 使用async/await：可以将onSubmit事件处理程序声明为async函数，并使用await关键字来等待第一个操作完成，然后执行第二个操作。例如：
class MyForm extends React.Component {
handleSubmit = async (event) => {
event.preventDefault();
// 执行第一个操作
// ...
// 等待第一个操作完成
await someAsyncFunction();
// 执行第二个操作
// ...
}
render() {
return (
<form onSubmit={this.handleSubmit}>
{/* 表单内容 */}
<button type="submit">提交</button>
</form>
);
}
}以上是在React中让onSubmit执行两个操作的几种常见方式。具体选择哪种方式取决于具体的需求和代码结构。
相关·内容
我可以让onSubmit做其中的一个，但似乎我不能同时拥有这两个。让程序同时注册两者的最佳方法是什么？下面是我在<Autoform/>标签上使用onSubmit操作的React常量： <AutoForm
ref={ref =>
浏览 14提问于2017-07-15得票数 0
我想要创建一个简单表单的组件，假设有4个输入字段和一个要提交的按钮。当用户单击submit时，将发出POST请求。但是，我想重用相同的组件来发出PUT请求。我怎样才能做到这一点？
浏览 0提问于2018-10-30得票数 2
回答已采纳
2回答
它获取redux操作来调用上传，并获取图像文件路径，一旦图像打开，该操作将该路径放入适当的reducer中。这里它与两个道具一起使用：import React, { Component } from 'react';
ex
浏览 2提问于2018-10-12得票数 0
我应该在输入中输入一个文本，该文本应该出现在console.log中。介于42到52之间的onSubmit函数。每个人都在说我需要添加一个键，但是我不知道do在哪里有这个键到代码中，以获得呈现文本的输入框。你能给我的任何帮助都将不胜感激。channels = [ {name: 'Software Support'} class Channel extends React.Compone
浏览 0提问于2018-06-22得票数 1
2回答
我在组件内有表格： <form className="new_review" id="new_review当我点击提交时，如何获得表单数据？
浏览 0提问于2019-07-23得票数 0
回答已采纳
1回答
假设您有这样的简单形式： return ( <form<br /> </form> )
export {
浏览 1提问于2018-11-07得票数 13
回答已采纳
2回答
我想让我的React.js页面在点击提交按钮后重新加载。这是因为我将新条目放入数据库中，一旦提交成功，我希望从数据库请求新数据并显示它们。import React, {useEffect, useState} from 'react';
const Questionnaire = (updated, setUpdated] = useState(false); // app
浏览 20提问于2021-12-01得票数 0
1回答
在我的反应本地应用程序中，我有一个屏幕，其中包含一个表单。我想在加载屏幕时提交表单，因为表单中的值是不变的。所以我想在装货时提交表格。有可能吗？谁能帮我..。<PrimaryButton onPress={() => onSubmit(siteUrl)}"loading" : undefined}我尝试了这个onP
浏览 0提问于2020-09-28得票数 1
回答已采纳
我有一个React组件，它显示一个简单的搜索表单。我使用“受控组件”()，以便React组件存储搜索标准，并且是真相的来源。标题中的搜索框:当表单提交时，它重定向到我的应用程序中的另一个页面
&l
浏览 2提问于2020-01-16得票数 0
回答已采纳
具体来说，我的onChange处理程序在MultipleChoiceAnswer中从未被调用过，但是其他的生命周期函数仍然正常工作。密码在下面。Question.js getInitialState('div', {className: 'ui form', onSubmit</e
浏览 3提问于2015-04-25得票数 0
回答已采纳
嗨，我有一个Reactjs组件，在这个组件中，.I有一个表单在form中，我有一个search field..when，用户点击enter my component重载。我想使用_ import data from ".
浏览 14提问于2021-08-28得票数 0
回答已采纳
1回答
我们正在使用react、react-redux和react-router。在我的一个组件中，我使用来自react-router的<Route>组件来呈现我的一个表单组件。在提交表单并创建事件时，我希望我的父组件(其中包含<Route>组件的组件)重新呈现，以便我的事件列表将包含添加的事件。PrivateEvents events={state.private}/>
<Route component={
浏览 0提问于2018-03-02得票数 0
如果onsubmit事件和onsubmit属性都定义在同一个表单上，会发生什么？例如：-...return true; alert(&qu
浏览 0提问于2013-10-31得票数 2
回答已采纳
1回答
<h1>{this.state.firstName}</h1> );}
大家好，我目前正在学习React我这里的代码的工作原理是，它将在浏览器中显示用户在输入框中键入的内容。我似乎不能弄明白或无法工作的是，映射输入中键入的内容以停留在屏幕上。也就是说，当我按回车键时，它会刷新，名称也会消失。我现在正在尝试创建一个无序列表，以使每个名称都显示在屏幕上。任何帮助或链接都将非常感谢。
浏览 0提问于2020-01-11得票数 0
3回答
onSubmit反应js问题
、、、、
如果它不是我代码中的内容，我需要的是用户可以按下"Enter“，并且它可以执行"Consultar”按钮的相同功能。 return true; return 'El formato no es válido'; const onSubmit={handleSubmit(onSubmit)} id='formulario&#
浏览 6提问于2022-02-24得票数 0
sendMessage(e) : console.log('no good');}} </div>
) 在填写输入字段并按Enter之后，为了防止刷新，我在sendMessage函数中使用了e.preventDefault()，但是尽管如此，页面还是会刷新，而且socket-io id也会更改。如何防止页面刷新？
浏览 18提问于2020-11-21得票数 0
我正在使用ajax功能。当我使用Enter键选择任何建议时，表单会自动提交，因为submit按钮是自动聚焦的。有没有办法使用enter键选择ajax建议，也可以使用enter键提交表单。例如，当我输入所有字段的值时，只有提交按钮被启用。
浏览 1提问于2011-01-10得票数 5
在我的项目中，我创建了一个负责登录的组件。它返回一个表单并包含一个名为onSubmit的验证方法。当前的方法如下所示： const [name, setName]onLogin({ name, password })
setPassword("")}
我想让整
浏览 4提问于2021-12-08得票数 2
回答已采纳
我想为一个功能强大的React组件编写一个简单的单元测试。我已经在互联网上搜索过了，但看起来大多数单元测试都是针对类组件的。该组件只是一个具有一个input和一个submit的简单form。我认为我需要编写两个测试，一个用于input字段，另一个用于submit按钮。组件为：
return ( className="form-wrapper&quo
浏览 2提问于2020-07-24得票数 0
在Redux-Form中，似乎您将onSubmit作为道具传递给您的form组件，然后form组件将在其form标记上拥有一个onSubmit={handleSubmit}属性。这是有意义的，因为Redux-Form将收集所有的表单数据，并将其作为单个对象参数传递给onSubmit函数。但是，如果同一父组件有多个表单组件子组件，会发生什么呢？您只能将一个onSubmit函数传递给两个表单子对象，即使它们需要对提交的信息执行不同的操作。
浏览 0提问于2016-10-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
