无法覆盖React组件内的表单的onSubmit处理程序

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法覆盖React组件内的表单的onSubmit处理程序相关的知识,希望对你有一定的参考价值。

我的问题很简单,但我似乎无法弄清楚,甚至羞于在这里问它。我需要通过表单阻止整页刷新。我知道我必须覆盖它的onSubmit(e)处理程序并调用e.preventDefault(),但这不起作用,该方法根本没有被调用。即使经过多次尝试,我似乎无法弄明白,如果你能帮助我,我将不胜感激!谢谢!

完整的代码在https://github.com/rajatpundir/url-shortener/blob/master/imports/ui/LogIn.js

export class LogIn extends React.Component {

  onSubmit(e) {
    e.preventDefualt();
  }

  render() {
    return(
      <div>
        <form onSubmit={this.onSubmit.bind(this)} noValidate >
          <button >Login</button>
        </form>
        <Link to="/signup">Need an account?</Link>
      </div>
    );
  }
}
答案

错字'preventDefault'而不是'preventDefault'

以上是关于无法覆盖React组件内的表单的onSubmit处理程序的主要内容,如果未能解决你的问题,请参考以下文章

使用 react 和 EmailJs 在表单中通过 onSubmit 传递第二个参数

使用 Jest 和 TestUtils 测试 React 表单提交

如何覆盖 react-hooks 组件内的函数测试 - Enzyme/Jest

Material UI 的 React 评分组件是如何在表单中使用的?

通过 onSubmit 在 React 中更改表单的 CSS 样式

Ionic2 Ion-Input onSubmit 单击表单内的顶部按钮