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)或错误。

我认为，问题出现在<Navbar>的{{1}}组件中，因为当我编写自己的react-bootstrap并将其插入此<Modal>时，问题是＆＃ 39;解决了。如果我从<Navbar>移动<form>所有工作。

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

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

登录：<Navbar>

密码：onioni@example.com

您应点击password，然后点击User profile。谢谢：）

Answer 1

我发现了一些看似解决方案的内容：https://github.com/react-bootstrap/react-bootstrap/issues/3105

我想哭。

React form onSubmit不起作用，输入不允许使用空格

1 个答案: