Javascript 阻止提交按钮提交页面上的所有表单？
我在一个页面上有两个表单，在我的React/Material UI页面上有一个登录和注册表单。每个表单都有各自独立的submit按钮，该按钮调用一个函数来验证数据并执行一组操作（由于与问题无关，因此未包含在下面的代码中）。当我提交注册表单时，它也会提交登录表单。如何使两个表单不从一个提交按钮触发Javascript 阻止提交按钮提交页面上的所有表单？,javascript,html,reactjs,forms,onsubmit,Javascript,Html,Reactjs,Forms,Onsubmit,我在一个页面上有两个表单，在我的React/Material UI页面上有一个登录和注册表单。每个表单都有各自独立的submit按钮，该按钮调用一个函数来验证数据并执行一组操作（由于与问题无关，因此未包含在下面的代码中）。当我提交注册表单时，它也会提交登录表单。如何使两个表单不从一个提交按钮触发 handleLoginSubmit = (event) => { event.preventDefault(); const userData = { email:
handleLoginSubmit = (event) => {
event.preventDefault();
const userData = {
email: this.state.email,
password: this.state.password,
};
this.props.loginUser(userData, this.props.history);
};
handleSignupSubmit = (event) => {
event.preventDefault();
const newUserData = {
email: this.state.newEmail,
password: this.state.newPassword,
confirmPassword: this.state.confirmNewPassword,
handle: this.state.newHandle,
};
this.props.signupUser(newUserData, this.props.history);
};
<Grid container className={classes.formWrapper}>
// login form
<Grid item sm xs={12} className={classes.loginFormWrapper}>
<form
noValidate
onSubmit={this.handleLoginSubmit}
className={classes.form}
id="loginform"
>
<TextField
id="email"
name="email"
type="email"
label="Email"
variant="outlined"
margin="dense"
className={classes.loginTextField}
helperText={errors.email}
error={errors.email ? true : false}
value={this.state.email}
onChange={this.handleChange}
/>
<TextField
id="password"
name="password"
type="password"
label="Password"
variant="outlined"
margin="dense"
className={classes.loginTextField}
helperText={errors.password}
error={errors.password ? true : false}
value={this.state.password}
onChange={this.handleChange}
/>
{errors.general && (
<Typography variant="body2" className={classes.customError}>
{errors.general}
</Typography>
)}
<Button
type="submit"
variant="contained"
color="primary"
disabled={loading}
className={classes.button}
>
Log In
{loading && (
<CircularProgress
size={30}
className={classes.progress}
/>
)}
</Button>
</form>
</Grid>
// signup form
<Grid item sm xs={12} className={classes.signupFormWrapper}>
<Typography className={classes.pageTitle}>
Create An Account
</Typography>
<Typography className={classes.subTitle}>
Joining made easy.
</Typography>
<form
noValidate
onSubmit={this.handleSignupSubmit}
className={classes.form}
id="signupform"
>
<TextField
id="newHandle"
name="newHandle"
type="text"
label="Handle"
variant="outlined"
margin="dense"
color="secondary"
className={classes.textField}
helperText={errors.handle}
error={errors.handle ? true : false}
value={this.state.newHandle}
onChange={this.handleChange}
fullWidth
/>
<TextField
id="newEmail"
name="newEmail"
type="email"
label="Email"
variant="outlined"
margin="dense"
color="secondary"
className={classes.textField}
helperText={errors.newEmail}
error={errors.newEmail ? true : false}
value={this.state.newEmail}
onChange={this.handleChange}
fullWidth
/>
<TextField
id="newPassword"
name="newPassword"
type="password"
label="Password (Min 6 Characters)"
variant="outlined"
margin="dense"
color="secondary"
className={classes.textField}
helperText={errors.newPassword}
error={errors.newPassword ? true : false}
value={this.state.newPassword}
onChange={this.handleChange}
fullWidth
/>
<TextField
id="confirmNewPassword"
name="confirmNewPassword"
type="password"
label="Confirm Password"
variant="outlined"
margin="dense"
color="secondary"
className={classes.textField}
helperText={errors.confirmNewPassword}
error={errors.confirmNewPassword ? true : false}
value={this.state.confirmNewPassword}
onChange={this.handleChange}
fullWidth
/>
{errors.general && (
<Typography variant="body2" className={classes.customError}>
{errors.general}
</Typography>
)}
<br />
<br />
<Button
type="submit"
variant="contained"
color="secondary"
className={classes.button}
disabled={loading}
fullWidth
>
SignUp
{loading && (
<CircularProgress
size={30}
className={classes.progress}
/>
)}
</Button>
</form>
</Grid>
</Grid>
快速修复：更改按钮类型，使其成为普通按钮而不是提交按钮。 然后创建一个函数，将表单id作为参数并提交该表单
但实际上，无论如何，不应该同时提交这两份表格。您的代码中是否有您没有向我们展示的东西可以解释为什么它们可能以这种方式链接？例如，它们是嵌套的还是在表中？在注册用户和登录用户函数中会发生什么？！这两个函数都使用e.preventDefault（）防止重新加载页面，然后将表单输入文本数据的状态推送到const对象（userData和newUserData）中，最后，数据被推送到一个操作中，该操作将验证表单数据，并在推送到我的主页之前让用户登录或注册。请提供
此.props.signupUser句柄*提交false export const loginUser = (userData, history) => dispatch => {
dispatch({ type: LOADING_UI });
axios
.post("/login", userData)
.then(res => {
setAuthorizationHeader(res.data.token);
dispatch(getUserData());
dispatch({ type: CLEAR_ERRORS });
history.push("/home");
})
.catch(err => {
dispatch({
type: SET_ERRORS,
payload: err.response.data
});
});
};
export const signupUser = (newUserData, history) => dispatch => {
dispatch({ type: LOADING_UI });
axios
.post("/signup", newUserData)
.then(res => {
setAuthorizationHeader(res.data.token);
dispatch(getUserData());
dispatch({ type: CLEAR_ERRORS });
history.push("/home");
})
.catch(err => {
dispatch({
type: SET_ERRORS,
payload: err.response.data
});
});
};