React - 阻止表单提交

Question

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

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

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

我错过了什么？

Answer 1

import React, { Component } from 'react';

export class Form extends Component {
  constructor(props) {
    super();
    this.state = {
      username: '',
    };
  }
  handleUsername = (event) => {
    this.setState({
      username: event.target.value,
    });
  };

  submited = (event) => {
    alert(`Username: ${this.state.username},`);
    event.preventDefault();
  };
  render() {
    return (
      <div>
        <form onSubmit={this.submited}>
          <label>Username:</label>
          <input
            type="text"
            value={this.state.username}
            onChange={this.handleUsername}
          />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

export default Form;

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

真的不需要 JS ... 只需将type 属性添加到值为button 的按钮

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

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

Answer 6

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

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

代码

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

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

<form onSubmit={this.onSubmit}>

及以上代码

onSubmit (event) {
  event.preventDefault();

  // custom form handling here
}

Answer 7

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

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

Answer 8

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

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

Answer 9

两种方式

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

---

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

希望能帮到你

Answer 10

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

Answer 11

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

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