在 React.js 中设置 onSubmit

Question

在提交表单时，我试图 doSomething() 而不是默认的 post 行为。

显然在 React 中，onSubmit is a supported event for forms. 但是，当我尝试以下代码时：

var OnSubmitTest = React.createClass({
    render: function() {
        doSomething = function(){
           alert('it works!');
        }

        return <form onSubmit={doSomething}>
        <button>Click me</button>
        </form>;
    }
});

方法doSomething()是运行，但此后，默认的post行为仍然被执行。

你可以在我的 jsfiddle 中测试这个。

我的问题：如何防止默认的 post 行为？

Answer 1

在您的 doSomething() 函数中，传入事件 e 并使用 e.preventDefault().

doSomething = function (e) {
    alert('it works!');
    e.preventDefault();
}

Answer 2

您可以将事件作为参数传递给函数，然后阻止默认行为。

var OnSubmitTest = React.createClass({
        render: function() {
        doSomething = function(event){
           event.preventDefault();
           alert('it works!');
        }

        return <form onSubmit={this.doSomething}>
        <button>Click me</button>
        </form>;
    }
});

Answer 3

我还建议将事件处理程序移到渲染之外。

var OnSubmitTest = React.createClass({

  submit: function(e){
    e.preventDefault();
    alert('it works!');
  }

  render: function() {
    return (
      <form onSubmit={this.submit}>
        <button>Click me</button>
      </form>
    );
  }
});

Answer 4

<form onSubmit={(e) => {this.doSomething(); e.preventDefault();}}></form>

对我来说很好用

在 React.js 中设置 onSubmit

Setting onSubmit in React.js

javascript

forms

form-submit

reactjs

onsubmit