为什么在表单中提交onclick时不起作用？

Question

此表单使用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>

Answer 1

您应该尝试将按钮的类型从“提交”更改为“按钮”。或完全删除类型参数。目前，提交类型按钮允许表单执行onSubmit，而无需考虑按钮自身的onClick。