反应表单 onSubmit 不起作用，输入不允许使用空格

Question

GitHub 问题：https://github.com/facebook/create-react-app/issues/4290#issuecomment-380521431

我找到了力量的东西：

    import React, { Component } from "react";
    import FieldGroup from "./FieldGroup";
    import { connect } from "react-redux";
    import { Form, Button } from "react-bootstrap";
    class UserUpdateForm extends Component {
      constructor(props) {
        super(props);
        this.handleUserUpdate = this.handleUserUpdate.bind(this);
        this.handleChangeName = this.handleChangeName.bind(this);
        this.handleChangeNickname = this.handleChangeNickname.bind(this);
        this.state = {
          name: this.props.current_user.name,
          nickname: this.props.current_user.nickname
        };
      }

      handleChangeName(event) {
        this.setState({
          name: event.target.value
        });
      }
      handleChangeNickname(event) {
        this.setState({
          nickname: event.target.value
        });
      }

      handleUserUpdate(event) {
        event.preventDefault();
        const url = event.target.action;
        console.log(url);
        return false;
      }
      render() {
        return (
          <Form
            onSubmit={this.handleUserUpdate}
            action={this.props.action}
            method="patch"
            id={this.props.id}
          >
            <FieldGroup
              role="form"
              id={`${this.props.id}Name`}
              type="text"
              label="User Name"
              placeholder="Enter User Name"
              onChange={this.handleChangeName}
              value={this.state.name}
            />
            <FieldGroup
              role="form"
              id={`${this.props.id}Nickname`}
              type="text"
              label="User Nickname"
              placeholder="Enter User Nickname"
              onChange={this.handleChangeNickname}
              value={this.state.nickname}
            />
            <Button className="btn btn-primary btn-large centerButton" type="submit">Send</Button>
          </Form>
        );
      }
    }

    export default connect(state => ({
      current_user: state.current_user
    }))(UserUpdateForm);

登录/注册表单有效，但 UserUpdate 无效。实际上，onSubmit 不起作用。也跳过了空格。我没有看到 console.log(url) 或错误。

我认为，问题出在react-bootstrap 的<Navbar> 组件中，因为当我编写自己的<Modal> 并将其插入此<Navbar> 时，问题并未解决。如果我将 <form> 从 <Navbar> 移出，所有工作。

应用程序：https://on-money.herokuapp.com

Git：https://github.com/yashka713/on_money_front/blob/deploy/src/forms/UserUpdateForm.js

登录：onioni@example.com

密码：password

您应该点击User profile，然后点击FontAwesome Icon。 谢谢 :)

Answer 1

我找到了一些看起来像解决方案的东西：https://github.com/react-bootstrap/react-bootstrap/issues/3105

我想哭。