为什么使用create-react-app时没有提交表单？

Question

在我迁移到使用create-react-app之前，我的google auth按钮工作得很好。当我切换到CRA时，表单并没有提交给服务器，相反，应用程序似乎正在将action属性中的新路径推送到历史记录中。CRA会以某种方式自动禁用表单提交吗？有没有什么办法呢？谢谢!

这是表单：

<form method="get" action="/aoth/google" className="google-form">
      <input type="submit" className="google-login" value="Google+" />
</form>

Answer 1

下面是一个简单的代码片段，展示了如何处理表单提交。希望这能有所帮助。

​

class App extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const data = new FormData(form);
    for (let name of data.keys()) {
      const input = form.elements[name];
      console.log(input);
      console.log(input.value);
    }
    
    fetch('/aoth/google', {
      method: 'GET',
      body: data,
    });
  }

    render() {
      return (
        <form onSubmit={this.handleSubmit} className="google-form">
              <input id="username" name="username" type="text" />
              <input type="submit" className="google-login" value="Google+" />
        </form>
      );
   }
}

ReactDOM.render( < App / > ,
  document.getElementById('root')
)

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<div id="root" />

​