const styles = {
  card: {
    minWidth: 240,
    color: 'green'
  },
  title: {
    fontSize: 14
  },
  pos: {
    marginBottom: 12,
    padding: 10,
    margin: 10
  }

};

function handleToggle(colorDecider) {
  if (colorDecider)
    styles.card.color = 'blue';
  else
    styles.card.color = 'red';
}

Ici, j'essaie de changer la couleur de la carte en utilisant la fonction handleToggle basée sur la valeur de colorDecider. Mais le code ne change pas. Pourtant, j'ai vérifié le styles.card.color en utilisant console.log, la couleur modifiée est imprimée dans le console. Mais la couleur ne change pas réellement dans la carte

1
Raghavendra Kaushik 17 mars 2019 à 17:28

2 réponses

Meilleure réponse

La définition d'une propriété quelque part dans un objet ne restitue pas comme par magie les parties liées de la page. Si vous avez besoin de quelque chose avec état, déplacez-le dans l'état du composant associé :

 class Colorful extends React.Component {
  constructor(...props) {
   super(...props);
   this.state = { color: "red" };
  }

  changeColor(color) { this.setState({ color }); }

  render() {
   return <div 
     style={{ color: this.state.color }}
     onClick={() => this.changeColor("blue")}
  >Click me!</div>;
 }
}
1
Jonas Wilms 17 mars 2019 à 15:07

D'accord avec @jonaswilms mais pourrait ajouter que vous pouvez également forcer une mise à jour comme celle-ci :

function handleToggle(colorDecider) {
  if (colorDecider)
    styles.card.color = 'blue';
  else
    styles.card.color = 'red';
  this.forceUpdate(); // force rerender
}

Ce qui précède suppose, bien sûr, que vous avez lié la bonne valeur this, par ex.

<div onClick={handleToggle.bind(this)} />
0
jsdeveloper 17 mars 2019 à 16:57