是否阻止提交页面上的所有表单的提交按钮？

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作为参数并提交该表单的函数。

但是实际上，无论如何都不应同时提交两种表格。您的代码中是否有未显示给我们的内容可以解释为什么可能以这种方式链接它们？ Ar ethey是嵌套还是例如在表中？