反应-防止表单提交

JavaScript React.js

路易Eva

2020-03-19

我一直在试验React。在我的实验中，我正在使用Reactstrap框架。单击按钮时，我注意到HTML表单已提交。有没有一种方法可以防止单击按钮时提交表单？

我在这里重新创建了我的问题。我的表单非常基本，看起来像这样：

<Form>
  <h3>Buttons</h3> 
  <p>
    <Button color="primary" onClick={this.onTestClick}>primary</Button>&nbsp;
  </p>
</Form>

我想念什么？

第2323篇《反应-防止表单提交》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共8个回答

Pro神无猴子 2020.03.19

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

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

null 2020.03.19

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

逆天理查德 2020.03.19

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

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

西里Gil 2020.03.19

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

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

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

猿前端 2020.03.19

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

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

米亚阿飞 2020.03.19

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

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

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

阿飞番长 2020.03.19

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

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

码

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

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

<form onSubmit={this.onSubmit}>

及以上代码

onSubmit (event) {
  event.preventDefault();

  // custom form handling here
}

飞云达蒙 2020.03.19

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