У меня есть 2 формы на одной странице, форма для входа и регистрации на моей странице React / Material-UI. Каждая форма имеет свою отдельную кнопку отправки, которая вызывает функцию, которая проверяет данные и выполняет набор действий (не включены в приведенный ниже код из-за неуместности проблемы). Когда я отправляю форму регистрации, она также отправляет форму входа в систему. Как сделать так, чтобы обе формы не запускались с одной кнопки отправки?
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>
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
});
});
};