checkbox auto submit Résolu/Fermé

Question

Bonjour, 

J'utilise React.js
Est il possible de crée un checkbox qui envoie son nouveau status a chaque modification sans l'utilisation d'un second bouton submit ? 

et si oui comment ? 

merci de votre aide


Configuration: Linux / Firefox 74.0

Tartaros · Answer

Bonjour,
dans ce cas il faut faire un écouteur d'événement pour l'événement "change"(le mieux est d'utiliser addEventListener le 3ème de la liste):
https://www.w3schools.com/jsref/event_onchange.asp

Et dans la fonction indiquer que le formulaire doit être envoyé ce qui peut se faire avec la méthode .submit:
https://www.w3schools.com/jsref/met_form_submit.asp

Dans le cas d'une checkbox il faut le faire(mettre un écouteur) autant de fois qu'il y a de checkbox pour détecter le changement sur chaque case à cocher je pense je pense.

Bien sûr si le formulaire contient autre chose que les checkbox ça paraît pas très cohérent puisque les autres champs pourront être envoyés sans être remplis.

Utilisateur anonyme · Answer

merci de ta réponse.

il n'y a que des checkbox dans mon formulaire donc je vais suivre ton conseil.
je reviens vers vous si il y a du nouveau.

Utilisateur anonyme · Answer

voici une solution élégante et efficace pour automatiser le changement d'état d'une checkbox :

  constructor(props) {
    super(props);

    this.state = {
      checkedItems: new Map(),
      lock: 0,
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const item = e.target.name;
    const isChecked = e.target.checked;
    this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
   }

render() {
    return (
       <CheckBox name="UZ" OFF="CB is OFF" ON="CB is ON" id="cb01" onChange={this.handleChange} />
     )
}

et ce que représente réellement <CheckBox> :

import React from "react";
import './CheckBox.css'

const CheckBox = ({ name, id, OFF, ON, onChange }) => (
  <React.Fragment>
    <input name={name} className="tgl tgl-skewed" id={id} type="checkbox" onChange={onChange} />
    <label className="tgl-btn" data-tg-off={OFF} data-tg-on={ON} htmlFor={id}></label>
  </React.Fragment>
);

export default CheckBox;

Checkbox auto submit

3 réponses

Discussions similaires