为什么提交 onclick 在表单内时不起作用？答案

【问题标题】：why is submit onclick not working when its inside the form?为什么提交 onclick 在表单内时不起作用？
【发布时间】：2020-08-27 12:42:05
【问题描述】：

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

【问题讨论】：

检查您的浏览器检查器是否有 javascript 错误。
“中断并重新启动应用程序”是什么意思？提交按钮为表单生成提交事件。听起来它正在做它的工作。

标签： css forms bootstrap-4 react-bootstrap

【解决方案1】：

您应该尝试将按钮的类型从“提交”更改为“按钮”。或者一起删除类型参数。目前，提交类型按钮允许表单执行 onSubmit 忽略按钮自己的 onClick。

【讨论】：