web-dev-qa-db-fra.com

Comment activer / désactiver l'état booléen du composant?

Je voudrais savoir comment basculer l'état booléen d'un composant de réaction. Par exemple:

J'ai un contrôle d'é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, à l'aide de la méthode this.setState:

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

Bien sûr, je reçois un ncaught ReferenceError: la vérification n’est pas définie. Alors, comment puis-je y parvenir?

Merci d'avance.

javascriptreactjsreactjs-flux
49
noob

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

Dans ton cas:

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

Voir docs

167
Dane

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 mauvaise pratique de le faire de cette façon. Mieux vaut le déplacer vers une méthode distincte et ne pas écrire de rappels directement dans le balisage.

15
Eugene Tsakh

Utilisez checked pour obtenir la valeur. Pendant onChange, checked sera true et ce sera un type de boolean.

J'espère que cela t'aides!

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>
3
Pranesh Ravi

Essayer:

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

Utiliser 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.

2
Dan Andersson

Je suis arrivé dans cette page lorsque je cherche à utiliser l'état de basculement dans le composant React à l'aide de Redux, mais je ne trouve pas ici d'approche utilisant la même chose.

Donc, je pense que cela pourrait aider quelqu'un qui avait du mal à implémenter l'état de basculement en utilisant Redux.

Mon fichier réducteur va 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;
};

Je change d'état en cliquant sur l'image. Donc, ma balise img va ici avec la fonction onClick.

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

Ma fonction Basculer Popup va ci-dessous, qui appellent Dispatcher.

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

Cet appel va à la fonction mapDispatchToProps ci-dessous, qui renvoie l'état basculé.

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

Je vous remercie.

0
Balasubramani M

J'ai trouvé cela le plus simple quand on bascule des valeurs booléennes. En termes simples, si la valeur est déjà vraie, elle est définie sur false et vice versa. Méfiez-vous des erreurs indéfinies, assurez-vous que votre propriété a été définie avant l'exécution

this.setState({
   propertyName: this.propertyName = !this.propertyName
});
0
rychrist88
state = {
  hover: false
}

onMouseEnter = () => {
  this.setState({
    hover: !this.state.hover
  });
};
0
ColeBear