React JS：如何根据另一个元素的 className bgcolor 样式更改一组 div 中的 div 的 bgcolor

Question

设置： 我动态生成了两个独立的 div 组。第一组 div 代表 4 种不同的 bgcolor 样式 [命名为 ArticlePreview]，第二组代表最终网格状结构 [命名为 ArticleCells] 中单元格的 4 个部分示例。

想要的结果： 当用户单击其中一篇文章以 select 它时，用户应该能够去点击一个或多个单元格并应用与 selected 文章相同的 bgcolor 样式和如果没有文章 selected，则默认 bgcolor 应用于文章和单元格元素。

沙盒： code sample

代码示例：

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 这将对您有所帮助 Sandbox Link。请仔细阅读，如果您有任何问题，请告诉我。

这是更新后的组件

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"));

React JS：如何根据另一个元素的 className bgcolor 样式更改一组 div 中的 div 的 bgcolor

React JS: how to change the bgcolor of a div in a group of divs based on another element's className bgcolor style

css

dictionary

classname

setstate

reactjs