奇怪的行为 onsubmit react-bootstrap 表单

Question

我正在使用 react-bootstrap，但我注意到表单提交时出现了一些奇怪的行为。

我有一个登录文件，它是一个模态表单

        <Modal>  
        ...
          <Form
            className="d-flex justify-content-center align-items-center flex-column"
            onSubmit={onSubmitSignIn}
          >
            <Form.Group controlId="formBasicEmail">
              <Form.Control
                type="email"
                placeholder="Enter email"
                className={`signInputStyle ${
                  invalidEmail ? "invalidFieldStyle" : ""
                }`}
                value={email}
                onChange={handleEmailValidation}
                required
              />
              <div>
                <small className="errorFormText">
                  {invalidEmail ? "must be a valid email" : ""}
                </small>
              </div>
            </Form.Group>
           ...
            <div className="signupAcc">
              Do not have an account?
              <span onClick={() => setModalShow(true)}>SignUp</span>
              <SignUp show={modalShow} onHide={() => setModalShow(false)} />
           </div>
         ...
       </Form>
      </Modal>        

在登录组件中，当您单击 SignUp span 时，它会显示第二个模态（用于注册，因此我现在有两个模态）。

注册模式与登录模式类似，都具有onSubmit功能。

      <Modal>  
        ...
         <Form
            className="d-flex justify-content-center align-items-center flex-column"
            onSubmit={onSubmitValue}
          >
            <Form.Group controlId="formGridFirstName1">
              <Form.Control
                placeholder="First Name"
                required
                name="firstname"
                className={`signInputStyle ${
                  invalidateField.firstname ? "invalidFieldStyle" : ""
                }`}
                onChange={handleUserInput}
              />
              <div>
                <small className="errorFormText">
                  {invalidateField.firstname
                    ? "must be at least three letters"
                    : ""}
                </small>
              </div>
            </Form.Group>
         ...
       </Form>
      </Modal>        

我注意到，当我单击注册文件的按钮 (type='submit') 时，它也会触发登录的 onSubmit。我的问题是为什么会出现这种行为？是因为两个表单字段都已经在 dom 中了吗？或者是其他东西？我真的很想知道这种行为背后的原因以及如何解决它。谢谢。

Answer 1

将其中一个按钮设为 type="button" 并添加一个 onClick 操作。另一个应该这样工作。

Answer 2

这只是原生 HTML button 行为。如documentation 所述，按钮元素包含type 属性，接受3 个值：submit、reset 和button。如果type 属性与submit 值一起提供，它将

提交当前表单数据。

在 React-bootstrap 的 Form 组件的内部深处，它可能使用了 HTML Form 元素，因此单击按钮会触发与 Form.submit() 相同的机制。

如果您不希望这种行为，您可以简单地删除 type 属性，或将 type 属性设置为按钮 (type="button")。