Javascript 奇怪的行为提交反应引导表

我正在使用react引导，但我注意到表单提交上有一些奇怪的行为

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

        <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>        

...
{invalidEmail？”必须是有效的电子邮件“：”}
...
你没有账户吗？
setModalShow（true）}>注册
setModalShow（false）}/>
...

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

注册模式的形式与登录类似，它们都具有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>        

...
{invalidateField.firstname
？“必须至少包含三个字母”
: ""}
...

---

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

这只是本机HTML

按钮的行为。如上所述，按钮元素包含
类型
属性，该属性接受3个值：
提交
、
重置
和
按钮
。如果
type
属性随
submit
值一起提供，它将

提交当前表单数据

在React bootstrap的
表单
组件的引擎罩深处，它可能使用HTML元素，因此单击按钮会触发相同的机制

如果您不希望出现这种行为，只需删除
type
属性，或设置type属性aas按钮（
type=“button”
）。
这只是本机HTML
按钮的行为。如上所述，按钮元素包含
类型
属性，该属性接受3个值：
提交
、
重置
和
按钮
。如果
type
属性随
submit
值一起提供，它将

提交当前表单数据

在React bootstrap的
表单
组件的引擎罩深处，它可能使用HTML元素，因此单击按钮会触发相同的机制

如果您不希望出现这种行为，只需删除
type
属性，或设置type属性aas按钮（
type=“button”
）。
将其中一个按钮设置为type=“button”，并添加onClick操作。另一个按钮应该是这样工作的。
将其中一个按钮设置为type=“button”，并添加onClick操作。另一个应该是这样的。
谢谢您的回复，但是如果我将按钮的type属性更改为其他属性，我将无法获得默认的Html验证。@CharlesLukes ah我明白了。。在这种情况下，你介意发布按钮的代码吗？通常，如果要将
类型保持为submit，防止按钮触发Form.submit（）的一种方法是在onclick事件上使用event.preventDefault（）。（）谢谢您的回复，但是如果我将按钮的type属性更改为其他属性，我将无法获得默认的Html验证。@CharlesLukes-ah我明白了。。在这种情况下，你介意发布按钮的代码吗？通常，如果要将
类型保持为submit，防止按钮触发Form.submit（）的一种方法是在onclick事件上使用event.preventDefault（）。()