在 React.js 中设置 onSubmit答案

【问题标题】：Setting onSubmit in React.js在 React.js 中设置 onSubmit
【发布时间】：2015-04-13 07:02:07
【问题描述】：

在提交表单时，我尝试使用doSomething() 而不是默认的发布行为。

显然在 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 中进行测试。

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

【问题讨论】：

标签： javascript forms form-submit reactjs onsubmit

【解决方案1】：

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

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

【讨论】：

从 v0.13 开始，从事件处理程序返回 false 将被忽略，因此您必须使用 e.preventDefault() 或 e.stopPropagation()
如回答，后者是首选。
我想你的意思是前者
@SharkLasers 该评论是对不再可用的此帖子的编辑进行的。
很公平，但当 cmets 不再相关时，您可能应该删除它们。

【解决方案2】：

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

var OnSubmitTest = React.createClass({

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

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

【讨论】：

这是在组件中使用表单的正确方法:)

【解决方案3】：

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

对我来说很好用

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

在我的情况下，无论有无this：{this.doSomething} 或{doSomething} 都可以，因为doSomething 与render() 一起使用。