反应-防止表单提交

componentDidUpdate(){               
    $(".wpcf7-submit").click( function(event) {
        event.preventDefault();
    })
}

您可以使用componentDidUpdate和event.preventDefault()禁用表单提交。因为react不支持return false。

function onTestClick(evt) {
  evt.stopPropagation();
}

在onTestClick函数中，传递事件参数并对其进行调用preventDefault()。

function onTestClick(e) {
    e.preventDefault();
}

真的不需要JS ...只需type向按钮添加一个值为的属性button

<Button type="button" color="primary" onClick={this.onTestClick}>primary</Button>&nbsp;

默认情况下，按钮元素的类型为“提交”，这会使它们提交其封闭的表单元素（如果有）。更改type为“按钮”可以防止这种情况。

您已阻止事件的默认操作并false从函数返回。

function onTestClick(e) {
    e.preventDefault();
    return false;
}

确保您将onSubmit属性（而不是按钮）放在表单上，​​以防万一。

<form onSubmit={e => {e.preventDefault();}}>
    <button onClick={this.handleClick}>Click Me</button>
</form>

确保将按钮onClick功能更改为自定义功能。

preventDefault是您要寻找的。只是阻止按钮提交

<Button onClick={this.onClickButton} ...

码

onClickButton (event) {
  event.preventDefault();
}

如果您具有要以自定义方式处理的表单，则可以捕获onSubmit上的更高级别的事件，这也将阻止该按钮的提交。

<form onSubmit={this.onSubmit}>

及以上代码

onSubmit (event) {
  event.preventDefault();

  // custom form handling here
}

我认为首先要注意的是，如果没有javascript（纯HTML），则form在单击<input type="submit" value="submit form">或时会提交元素<button>submits form too</button>。在JavaScript中，您可以通过使用事件处理程序并调用e.preventDefault()按钮单击或表单提交来防止这种情况。e是传递给事件处理程序的事件对象。通过react，两个相关的事件处理程序可以通过as形式使用onSubmit，另一个通过可以在按钮上使用onClick。

示例：http：//jsbin.com/vowuley/edit？html，js，console，output