Question

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

我重新创建了我的问题here。我的表格很基本，看起来像这样：

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

我错过了什么？

Answer 1

我认为首先值得注意的是，如果没有javascript（普通html），<div data-bind="foreach: cars"> <div> <input type='radio' data-bind="checked: $root.vehicle, checkedValue: id, value:id"><span data-bind="text: model"></span> </div> </div> Model data, public class MyViewModel { public List<Cars> cars {get; set;} } public class Cars { public int Id{get; set;} public string Make {get; set;} public string Model {get; set;} }元素会在点击form或<input type="submit" value="submit form">时提交。在javascript中，您可以通过使用事件处理程序并在按钮单击或表单提交时调用<button>submits form too</button>来防止这种情况。 e.preventDefault()是传递给事件处理程序的事件对象。通过react，两个相关的事件处理程序可通过e表单获得，另一个通过onSubmit在按钮上使用。

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

Answer 2

真的不需要JS ...... 只需在按钮中添加type属性，其值为button

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

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

Answer 3

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

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

码

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

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

<form onSubmit={this.onSubmit}>

及以上代码

onSubmit (event) {
  event.preventDefault();

  // custom form handling here
}

Answer 4

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>&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 5

在onTestClick函数中，传入event参数并在其上调用preventDefault()。

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

Answer 6

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

Answer 7

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

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

Answer 8

如果有发件人，请确保将onSubmit属性而不是按钮放在表单上。

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

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

Answer 9

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 10

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

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

Answer 11

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

您可以使用componentDidUpdate和event.preventDefault()来禁用表单提交。由于react不支持返回false。

反应 - 防止表单提交

11 个答案: