J'essaie de changer la couleur d'arrière-plan du corps html en rouge en cliquant sur un bouton, mais je ne sais comment le faire qu'avec un élément qui se trouve déjà à l'intérieur du corps, pas le corps lui-même.

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bgColor: ""
    };
  }

  boxClick = e => {
    this.setState({
      bgColor: "red"
    });
  };

  render() {
    return (
      <div className="App">
        <article className="experimentsHolder">
          <div
            className="boxClickCss"
            style={{ backgroundColor: this.state.bgColor }}
            onClick={this.boxClick}
          >
            Click Me!
          </div>
        </article>
      </div>
    );
  }
}

Comme vous pouvez le voir, j'ai ajouté style={{backgroundColor: this.state.bgColor}} à div, mais je ne peux pas l'ajouter à l'intérieur du corps car ce n'est pas dans ce fichier. De l'aide?

1
Pleinair 7 mars 2019 à 21:59

2 réponses

Meilleure réponse

Voici un exemple de manipulation du corps dans un composant React, adapté de la réponse de Frédéric Caplette recommandant de le faire dans les méthodes de cycle de vie. Cependant, je suis d'accord avec le commentaire d'Erik Philips ci-dessus selon lequel ce type de manipulation est mieux fait en ajoutant/supprimant des classes CSS. L'utilisation des classes CSS découple les détails des styles de la logique du composant et permet l'extensibilité sans affecter cette logique.

const docBody = document.querySelector('body');

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {bgColored: false};
    this.colorBackground = this.colorBackground.bind(this);
    this.clearBackground = this.clearBackground.bind(this);
  }
  
  colorBackground() {
    this.setState({bgColored: true});
  }
  
  clearBackground() {
    this.setState({bgColored: false});
  }
  
  componentDidUpdate(prevProps, prevState) {
    const { bgColored } = this.state;
    const className = 'redBg';

    if(prevState.bgColored !== bgColored){
      bgColored ?
        docBody.classList.add(className) :
        docBody.classList.remove(className);
    }
  }
  
  render() {
    return (
      <div>
        <a href="#" onClick={() => this.colorBackground()}>Turn Red</a>
        {' | '}
        <a href="#" onClick={() => this.clearBackground()}>Reset</a>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));
.redBg {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
<div id="root"></div>
</body>
0
Daryl Wright 7 mars 2019 à 20:39