防止提交按钮提交页面上的所有表单？

Question

我在一个页面上有 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
   });
 });
};

Answer 1

快速修复：更改按钮类型，使其只是一个普通按钮，而不是提交按钮。 然后创建一个以表单 id 作为参数并提交该表单的函数。

但实际上两种表单都不应该同时提交。您的代码中是否有任何您没有向我们展示的内容来解释为什么它们可能以这种方式链接？例如，它们是嵌套在表中还是在表中？