J'ai un composant, qu'une liste d'articles.

render() {
    const { clickHandler } = this.props;
return (
    <section className="container birds-list">
        <ul className="birds-list__list">
            {this.props.list.map(({name, id}) => (
                <li key={id} className="birds-list__item">
                    <div className="shape shape-default"></div>
                    <div onClick={clickHandler} className="birds-list__item-name">{name}</div>
                </li>
            )
            )}
        </ul>
    </section>

Dans la fonction clickHandler, je change la couleur d'arrière-plan de div avec le nom de la classe de forme comme e.target.previousSibling.classList.add('shape-complete');

Mais quand je veux restituer mon composant avec de nouveaux noms, je veux changer tous les éléments div avec des noms de classe par défaut avec 'shape shape-default' au lieu de cela j'ai des éléments div avec des classes, que j'ai ajouté ('shape shape-default shape -Achevée')

0
trigsen 16 févr. 2020 à 21:21

1 réponse

Meilleure réponse

Vous avez muté le DOM en dehors de React. Vous devriez plutôt contrôler vos noms de classe dans "Reactland". Une méthode pour y parvenir consiste à maintenir une carte ou une structure de données à l'état d'éléments « sélectionnés » ou « cliqués » auxquels un nom de classe est appliqué (pensez de la même manière qu'une case à cocher est cochée).

state = {
  clicked: {},
};

const clickHandler = id => this.setState(prevState => {
  const newClicked = {...prevState.clicked};
  newClicked[id] = !newClicked[id];
  return newClicked;
});

render() {
  ...
  this.props.list.map(({name, id}) => {
    const classNames = ['shape shape-default'];
    if (this.state.checked[id] classNames.push('shape-complete');

    return (
      <li key={id} className="birds-list__item">
        <div className={classNames.join(' ')}></div>
        <div onClick={clickHandler} className="birds-list__item-name">{name}</div>
      </li>
    )
  })
  ...

L'utilisation du package npm classnames simplifie un peu cela

import classNames from 'classnames';
...

state = {
  clicked: {},
};

const clickHandler = id => this.setState(prevState => {
  const newClicked = {...prevState.clicked};
  newClicked[id] = !newClicked[id];
  return newClicked;
});

render() {
  ...
  this.props.list.map(({name, id}) => {
    const classnames = classNames(
      'shape',
      'shape-default',
      {
        'shape-complete': this.state.checked[id],
      },
    );

    return (
      <li key={id} className="birds-list__item">
        <div className={classnames}></div>
        <div onClick={clickHandler} className="birds-list__item-name">{name}</div>
      </li>
    )
  })
  ...
1
Drew Reese 16 févr. 2020 à 21:12