提交 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 跨度時，它會顯示第二個模態（用於注冊，因此我現在有兩個模態）。

注冊模式有一個類似於登錄的形式，它們都有 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

它只是本機 HTML button行為。 正如文檔中所述， button 元素包含type屬性，接受 3 個值： submit 、 reset和button 。 如果type屬性與submit值一起submit ，它將

提交當前表單數據。

在 React-bootstrap 的Form組件的深處，它可能使用了 HTML表單元素，因此單擊按鈕會觸發相同的Form.submit()機制。

如果您不想要這種行為，您可以簡單地刪除type屬性，或將 type 屬性設置為按鈕（ type="button" ）。

Answer 2

將其中一個按鈕設為 type="button" 並添加一個 onClick 操作。 另一個應該這樣工作。