为什么在使用create-react-app时表单未提交？

Question

My google auth button was working fine before I migrated to using create-react-app. when I switch to CRA, the form is not being submitted to the server and instead it seems like the app is pushing the new path in the action attribute to the history. Does CRA automatically disables form submission somehow? is there a work around? Thanks!

this is the form:

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

Answer 1

Here's a simple snippet showing how to handle form submission. Hope that helps.

 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" />