Réagir - La Prévention De La Soumission Du Formulaire

Question

J'ai fait des expériences avec de Réagir. Dans mon expérience, je suis en utilisant le Reactstrap cadre.Lorsque je clique sur un bouton, j'ai remarqué que le formulaire HTML soumet. Est-il possible d'empêcher la soumission d'un formulaire lorsque l'on clique sur un bouton?

J'ai recréé mon problème ici. Mon formulaire est assez simple et ressemble à ceci:

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

Ce qui me manque?

Answer 1

Je pense que c'est d'abord intéressant de noter que sans javascript (html), l' form élément soumet quand en cliquant sur l' <input type="submit" value="submit form"> ou <button>submits form too</button>. En javascript, vous pouvez éviter cela en utilisant un gestionnaire d'événements et en appelant e.preventDefault() sur le bouton de la souris, ou soumettre le formulaire. e est l'objet d'événement transmis dans le gestionnaire d'événements. À réagir, les deux gestionnaires d'événements sont disponibles via le formulaire comme onSubmit, et les autres sur le bouton via onClick.

Exemple: http://jsbin.com/vowuley/edit?html,js,console,sortie

Answer 2

Pas de JS besoin vraiment ... Il suffit d'ajouter un type d'attribut pour le bouton avec une valeur de button

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

Par défaut, le bouton éléments sont de type "submit" qui les amène à soumettre leur joignant élément de formulaire (le cas échéant). Modification de l' type de "bouton" en empêche.

Answer 3

preventDefault est ce que vous cherchez. Simplement à bloquer le bouton soumettre

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

code

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

Si vous disposez d'un formulaire dont vous souhaitez gérer de manière personnalisée, vous pouvez capturer un niveau plus élevé de l'événement onSubmit qui s'arrête également que le bouton de soumission.

<form onSubmit={this.onSubmit}>

et dans le code ci-dessus

onSubmit (event) {
  event.preventDefault();

  // custom form handling here
}

Answer 4

2 façons

D'abord on nous transmettre l'événement dans l'argument de droit dans le 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;

---

Deuxième cas, on passe en argument et nous n'avons droit dans le 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;

L'espoir peut aider

Answer 5

Dans votre onTestClick fonction, passer dans le cas de l'argument et appelez - preventDefault() sur il.

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