我一直在试验 React。在我的实验中，我使用的是Reactstrap 框架。当我单击一个按钮时，我注意到提交了 HTML 表单。有没有办法在单击按钮时阻止表单提交？
我在这里重新创建了我的问题。我的表单非常基本，如下所示：
<Form>
<h3>Buttons</h3>
<p>
<Button color="primary" onClick={this.onTestClick}>primary</Button>
</p>
</Form>
我错过了什么？
React - 防止表单提交
IT技术
javascript
reactjs
2021-01-28 21:21:22
6个回答
我认为首先值得注意的是，如果没有 javascript（纯 html），则form单击<input type="submit" value="submit form">或时元素会提交<button>submits form too</button>。在 javascript 中，您可以通过使用事件处理程序并调用e.preventDefault()按钮单击或表单提交来防止这种情况发生。e是传递给事件处理程序的事件对象。使用 react，两个相关的事件处理程序可以通过表单 as 获得onSubmit，另一个在按钮上通过onClick。
真的不需要 JS ......只需type向按钮添加一个值为button
<Button type="button" color="primary" onClick={this.onTestClick}>primary</Button>
默认情况下，按钮元素属于“提交”类型，这会导致它们提交其封闭的表单元素（如果有）。更改type为“按钮”可以防止这种情况。
preventDefault是您要查找的内容。只是阻止按钮提交
<Button onClick={this.onClickButton} ...
代码
onClickButton (event) {
event.preventDefault();
}
如果您有一个想要以自定义方式处理的表单，您可以捕获更高级别的 onSubmit 事件，这也将阻止该按钮提交。
<form onSubmit={this.onSubmit}>
及以上代码
onSubmit (event) {
event.preventDefault();
// custom form handling here
}
确保将 onSubmit 属性放在表单上而不是按钮上，以防万一您有 from。
<form onSubmit={e => e.preventDefault()}>
<button onClick={this.handleClick}>Click Me</button>
</form>
确保将按钮 onClick 属性更改为您的自定义函数。
2种方式
第一个我们将参数中的事件直接传递到 onClick 中。
onTestClick(e) {
e.preventDefault();
alert('here');
}
// Look here we pass the args in the onClick
<Button color="primary" onClick={e => this.onTestClick(e)}>primary</Button>
第二个我们将它传递给参数，我们在 onClick 中做得对
onTestClick() {
alert('here');
}
// Here we did right inside the onClick, but this is the best way
<Button color="primary" onClick={e => (e.preventDefault(), this.onTestClick())}>primary</Button>
希望能帮上忙