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

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

1 个答案: