React - 阻止表单提交

Posted 2023-02-21

【中文标题】React - 阻止表单提交

【英文标题】：React - Preventing Form Submission

【发布时间】：2017-02-10 02:51:57

【问题描述】：

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

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

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

我错过了什么？

【问题讨论】：

似乎与this 相关。尝试将按钮的类型设置为button？

【参考方案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;

【讨论】：

此问题已包含多个答案和一个已接受的答案。您能否解释（通过编辑您的答案）您的答案与其他答案的不同之处？也知道从长远来看，仅代码的答案是没有用的。

【参考方案2】：

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

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

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

【参考方案3】：

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

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

【参考方案4】：

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

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

【讨论】：

不鼓励在组件内部使用 jQuery，在表单中使用 onSubmit 属性，或者在最坏的情况下使用 ref

不要将 jquery 与 react 一起使用，这是一种非常糟糕的做法

【参考方案5】：

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

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

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

【讨论】：

如果您使用的是表单，这样做将不允许用户按回车键提交表单，我认为这很重要。

感谢您的精彩回答。仅供参考，这是关于此处提到的默认行为的参考：developer.mozilla.org/en-US/docs/Web/HTML/Element/…

@StormRage，您知道如何处理您希望表单使用回车键工作的事件（即不使用 onClick 提交按钮），但仍想禁用提交基于状态验证的按钮（例如密码长度）

最好用JS，因为它是JS，涵盖所有场景。

【参考方案6】：

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

<Button onClick=this.onClickButton ...

代码

onClickButton (event) 
  event.preventDefault();

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

<form onSubmit=this.onSubmit>

及以上代码

onSubmit (event) 
  event.preventDefault();

  // custom form handling here

【讨论】：

谢谢！ <form onSubmit=e => e.preventDefault(); > 允许我在表单上有一个提交按钮，但在提交表单时没有页面刷新。

【参考方案7】：

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

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

【参考方案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

【讨论】：

+1 这是真的。但请记住，如果您使用e.preventDefault()，您将失去浏览器的原生表单验证。

@Sagivb.g 但onSubmit 中的e.preventDefault() 不会禁用本机验证。

【参考方案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;

希望能帮到你

【参考方案10】：

function onTestClick(evt) 
  evt.stopPropagation();

【参考方案11】：

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

function onTestClick(e) 
    e.preventDefault();

【讨论】：

试过了，没用。事实上，当我查看组件的代码时，它已经在这样做了。代码可以看这里：github.com/reactstrap/reactstrap/blob/master/src/Button.js

我将它添加到小提琴中并且效果很好，唯一一次他们为您这样做是如果您在 Button 组件上传入this.props.disabled = true