Реакция JS: как изменить bgcolor div в группе div на основе стиля className bgcolor другого элемента

Question

setup: Я динамически сгенерировал две независимые группы div. Первая группа элементов представляет 4 различных стиля bgcolor [с именем ArticlePreview], а вторая группа представляет 4 частичных примера ячеек в структуре, которая в конечном итоге похожа на сетку [с именем ArticleCells].

требуемый результат: когда пользователь нажимает на одну из статей, чтобы выбрать ее, он должен затем иметь возможность go и щелкнуть одну или несколько ячеек и применить тот же стиль bgcolor, что и для выбранной статьи, и если статья не выбрана, то bgcolor по умолчанию применяется как к элементу article, так и к элементам ячейки.

песочница: образец кода

образец кода:

const ArticlePreview = props => {
  return (
    <div className={props.class} onClick={props.onClick}>
      {props.article}
    </div>
  );
};

const ArticleCells = props => {
  return (
    <div className={props.class} onClick={props.onClick}>
      {props.cell}
    </div>
  );
};
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: false,
      article: "",
      cell: "",
      class: ""
    };
  }

  onSelectArticle = article => {
    this.setState({
      selected: true,
      article: article
    });
  };

  onSelectCell = cell => {

    var style = (cell.currentTarget.style.backgroundColor =
      this.state.selected && this.state.cell === cell ? "bkcolor" : "default");
    this.setState({
      selected: true,
      cell: cell,
      class: { style }
    });
  };

  render() {
    let articles = ["Article 1", "Article 2", "Article 3", "Article 4"];
    let cells = ["Div 1", "Div 2", "Div 3", "Div 4"];

    return (
      <div>
        <div>
          {articles.map((article, index) => (
            <ArticlePreview
              key={index}
              class={
                this.state.selected &&
                this.state.article === article &&
                this.state.article === articles[0]
                  ? "bkcolorGreen"
                  : this.state.selected &&
                    this.state.article === article &&
                    this.state.article === articles[1]
                  ? "bkcolorBlue"
                  : this.state.selected &&
                    this.state.article === article &&
                    this.state.article === articles[2]
                  ? "bkcolorOrange"
                  : this.state.selected &&
                    this.state.article === article &&
                    this.state.article === articles[3]
                  ? "bkcolorYellow"
                  : "default"
              }
              onClick={() => this.onSelectArticle(article)}
              article={article}
            />
          ))}
        </div>
        <br />
        <div>
          {cells.map((cell, index) => (
            <ArticleCells
              key={index}
              class={this.state.class}
              onClick={cell => this.onSelectCell(cell)}
              cell={cell}
            />
          ))}
        </div>
      </div>
    );
  }
}

Answer 1

Это обновление для приведенного выше фрагмента, @punch поможет вам Ссылка в песочнице . Пожалуйста go через него и дайте мне знать, если у вас есть какие-либо проблемы.

Это обновленный компонент

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const ArticlePreview = props => {
  return (
    <div className={props.class} onClick={props.onClick}>
      {props.article}
    </div>
  );
};

const ArticleCells = props => {
  console.log(props.class);
  return (
    <div className={props.class} onClick={props.onClick}>
      {props.cell}
    </div>
  );
};

const articles = ["Article 1", "Article 2", "Article 3", "Article 4"];
const cells = ["Cell 1", "Cell 2", "Cell 3", "Cell 4"];
const colors = [
  "bkcolorGreen",
  "bkcolorBlue",
  "bkcolorOrange",
  "bkcolorYellow"
];

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: false,
      article: "",
      cell: "",
      class: ""
    };
  }

  onSelectArticle = article => {
    this.setState({
      selected: true,
      article: article
    });
  };

  onSelectCell = cell => {
    //cell.currentTarget.style.backgroundColor = "pink";
    cell.target.removeAttribute("class");
    cell.target.classList.add(colors[articles.indexOf(this.state.article)]);
    // var style = (cell.currentTarget.classList.add(colors[articles.indexOf(this.state.article)]) && this.state.cell === cell ? "bkcolor" : "default");
    this.setState({
      selected: true,
      cell: cell
      // class: { style }
    });
  };

  render() {
    return (
      <div>
        <div>
          {articles.map((article, index) => (
            <ArticlePreview
              key={index}
              class={
                this.state.selected && article === this.state.article
                  ? colors[articles.indexOf(this.state.article)]
                  : "default"
              }
              onClick={() => this.onSelectArticle(article)}
              article={article}
            />
          ))}
        </div>
        <br />
        <div>
          {cells.map((cell, index) => (
            <ArticleCells
              key={index}
              class={`${this.state.class}`}
              onClick={cell => this.onSelectCell(cell)}
              cell={cell}
            />
          ))}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));