此表单使用react-bootstrap样式。提交按钮会中断并重新启动此表单中的应用程序。当我将按钮移到表单标记之外时，它就工作了。是什么原因呢？我想保留表单标记中的按钮以进行样式设置。

<Form>
          <Form.Row>
            <Col xs={9}>
            <Form.Group>
            <InputGroup>
              <InputGroup.Prepend>
                <InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
              </InputGroup.Prepend>
              <Form.Control
                type="text"
                placeholder="Username"
                aria-describedby="inputGroupPrepend"
                name="username"
                value={this.state.username}
                onChange={(event) => {
                  console.log(`${this.state.username}`);
                  this.setState({username: event.target.value});
                }}
                required
              />
              <Form.Control.Feedback type="invalid">
                Please choose a username.
              </Form.Control.Feedback>

            </InputGroup>
            </Form.Group>
            </Col>
            <Col>
            <Button variant="primary" 
                    type="submit"
                    onClick={() => {
                      try {
                        console.log("Submit button clicked");
                      } catch (error) {
                        console.log(error);
                      }
                    }}>
              Submit
            </Button>
            </Col>
          </Form.Row>
        </Form>