Comment basculer l'état booléen du composant React?

Question

Je voudrais savoir comment basculer un état booléen d'un composant React. Par exemple:

J'ai une vérification de l'état booléen dans le constructeur de mon composant:

 constructor(props, context) { 
   super(props, context);

   this.state = {
      check: false
   };
};
 

J'essaie de basculer l'état à chaque fois que ma case est cochée, en utilisant la méthode this.setState:

 <label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label>
 

Bien sûr, j'obtiens un ReferenceError Uncaught: la vérification n'est pas définie . Alors, comment puis-je y parvenir?

Merci d'avance.

Answer 1

Puisque personne n'a posté cela, je poste la bonne réponse. Si la mise à jour de votre nouvel état dépend de l'état précédent, utilisez toujours la forme fonctionnelle setState qui accepte comme argument une fonction qui retourne un nouvel état.

Dans ton cas:

 this.setState(prevState => ({
  check: !prevState.check
}));
 

Voir les documents

Answer 2

Vous devez utiliser this.state.check au lieu de check.value ici:

 this.setState({check: !this.state.check})
 

Mais de toute façon, c'est une mauvaise pratique de le faire de cette façon. Il vaut mieux le déplacer vers une méthode distincte et ne pas écrire de rappels directement dans le balisage.

Answer 3

Utiliser checked pour obtenir la valeur. Au cours onChange, checked sera true et c'est un type d' boolean.

Espérons que cette aide!

class A extends React.Component {
  constructor() {
    super()
    this.handleCheckBox = this.handleCheckBox.bind(this)
    this.state = {
      checked: false
    }
  }
  
  handleCheckBox(e) {
    this.setState({
      checked: e.target.checked
    })
  }
  
  render(){
    return <input type="checkbox" onChange={this.handleCheckBox} checked={this.state.checked} />
  }
}

ReactDOM.render(<A/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 4

Essayer:

 <label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !this.state.check.value})}/> Checkbox </label>
 

L'utilisation de check: !check.value signifie qu'il recherche l'objet check , que vous n'avez pas déclaré.

Vous devez spécifier que vous voulez la valeur opposée de this.state.check .

Answer 5

J'ai été débarqué dans cette page, quand je suis à la recherche pour l'utilisation de la bascule de l'état de Réagir à l'aide de Redux, mais je ne trouve pas ici, tout en utilisant l'approche de même.

Donc, je pense que ça pourrait aider quelqu'un qui avait du mal à mettre en œuvre bascule dans l'état à l'aide de Redux.

Mon réducteur de fichier passe ici. Je reçois l'état initial false par défaut.

const INITIAL_STATE = { popup: false };
export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case "POPUP":
            return {
                ...state,
                popup: action.value
            };
        default:
            return state;
    }
    return state;
};

J'ai changer d'état en cliquant sur l'image. Donc, ma balise img est ici avec onClick function.

<img onClick={togglePopup} src={props.currentUser.image} className="avatar-image avatar-image--icon" />

Mon Basculer Popup fonction passe en-dessous, qui appellent Répartiteur.

const togglePopup = ev => {
    ev.preventDefault();
    props.handlePopup(!props.popup);
};

Cet appel va-dessous mapDispatchToProps fonction qui reflète le retour de la bascule de l'état.

const mapDispatchToProps = dispatch => ({
    handlePopup: value => dispatch({ type: "POPUP", value })
});

Je vous remercie.