Javascript React - 防止表单提交

React - Preventing Form Submission

提问by Some User

I've been experimenting with React. In my experiement, I'm using the Reactstrap framework.When I click a button, I've noticed that the HTML form submits. Is there a way to prevent form submission when a button is clicked?

我一直在试验 React。在我的实验中，我使用的是Reactstrap 框架。当我单击一个按钮时，我注意到提交了 HTML 表单。有没有办法在单击按钮时阻止表单提交？

I've recreated my issue here. My form is pretty basic and looks like this:

我在这里重新创建了我的问题。我的表单非常基本，如下所示：

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

What am I missing?

我错过了什么？

回答by eddywashere

I think it's first worth noting that without javascript (plain html), the formelement submits when clicking either the <input type="submit" value="submit form">or <button>submits form too</button>. In javascript you can prevent that by using an event handler and calling e.preventDefault()on button click, or form submit. eis the event object passed into the event handler. With react, the two relevant event handlers are available via the form as onSubmit, and the other on the button via onClick.

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

Example: http://jsbin.com/vowuley/edit?html,js,console,output

示例：http: //jsbin.com/vowuley/edit?html,js,console,output

回答by HaukurHaf

No JS needed really ... Just add a typeattribute to the button with a value of button

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

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

By default, button elements are of the type "submit" which causes them to submit their enclosing form element (if any). Changing the typeto "button" prevents that.

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

回答by Pawel

preventDefaultis what you're looking for. To just block the button from submitting

preventDefault是您要查找的内容。只是阻止按钮提交

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

code

代码

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

If you have a form which you want to handle in a custom way you can capture a higher level event onSubmit which will also stop that button from submitting.

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

<form onSubmit={this.onSubmit}>

and above in code

及以上代码

onSubmit (event) {
  event.preventDefault();

  // custom form handling here
}

回答by EQuimper

2 ways

2种方式

First one we pass the event in the argument right into the onClick.

第一个我们将参数中的事件直接传递到 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>&nbsp;

---

---

Second one we pass it into argument and we did right in the onClick

第二个我们将它传递给参数，我们在 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>&nbsp;

Hope that can help

希望能帮上忙

回答by Yonatan Dawit

Make sure you put the onSubmit attribute on the form not the button in case you have a from.

确保将 onSubmit 属性放在表单上而不是按钮上，以防万一你有一个 from。

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

Make sure to change the button onClick attribute to your custom function.

确保将按钮 onClick 属性更改为您的自定义函数。

回答by G?khan Kurt

You have prevent the default action of the event and return falsefrom the function.

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

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

回答by Soviut

In your onTestClickfunction, pass in the event argument and call preventDefault()on it.

在您的onTestClick函数中，传入事件参数并调用preventDefault()它。

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

回答by fvgs

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

回答by dougoftheabaci

There's another, more accessible solution: Don't put the action on your buttons. There's a lot of functionality built into forms already. Instead of handling button presses, handle form submissions and resets. Simply add onSubmit={handleSubmit}and onReset={handleReset}to your formelements.

还有另一个更易于使用的解决方案：不要将操作放在按钮上。表单中已经内置了很多功能。处理表单提交和重置，而不是处理按钮按下。只需将onSubmit={handleSubmit}和添加onReset={handleReset}到您的form元素。

To stop the actual submission just include eventin your function and an event.preventDefault();to stop the default submission behavior. Now your form behaves correctly from an accessibility standpoint and you're handling any form of submission the user might take.

要停止实际提交，只需event在您的函数中包含并event.preventDefault();停止默认提交行为。现在，从可访问性的角度来看，您的表单行为正确，并且您正在处理用户可能采取的任何形式的提交。

回答by prajakta gadhave

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

You can use componentDidUpdateand event.preventDefault()to disable form submission.As react does not support return false.

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