javascript - 阻止提交按钮提交页面上的所有表单？

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

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