如何在 React 中应用 classNames 以更改 React 中子 div 之一的背景颜色

Posted 2023-03-16

【中文标题】如何在 React 中应用 classNames 以更改 React 中子 div 之一的背景颜色

【英文标题】：How can I apply classNames in react to change the background color of one of the child div in React

【发布时间】：2016-11-16 21:27:46

【问题描述】：

我有 3 个孩子 divs 包裹在一个父母 div 中，如图所示：

点击每个孩子div，我希望将其背景颜色更改为红色。但是如果已经有一个div 背景颜色为红色，并且单击了其他一些div，则其背景颜色应更改为白色。只有一个div 背景颜色为红色。我是新手来反应。我在 React 中读到了 classNames 和 states，但不知道我该怎么做。

jsfiddle

提前致谢。

【问题讨论】：

我建议您从一些非常简单的事情开始，例如在按下 div 时单击以记录一些信息。然后继续让 div 在单击 div 时改变颜色。然后从该代码创建一个组件，该组件将公开 onClick 事件并将颜色作为道具。然后将其组合到一个新组件中，该组件的状态包含当前的“选定”div。当您不熟悉此功能时，自己尝试一下很重要，这是真正学习的唯一方法。如果它很难，通过将它分成更小的部分来使其更容易。 GLHF。

【参考方案1】：

你可以为所欲为

var Сards = React.createClass(
  getInitialState: function () 
    return 
      cards: [
      	 name: 'сard 1', isActive: false ,
         name: 'сard 2', isActive: false ,
         name: 'сard 3', isActive: false 
      ]
    ;
  ,
  
  handleClick: function (index) 
    const cards = this.state.cards.map((card, i) => 
      card.isActive = i === index ? true : false;
      return card;
    )
    
    this.setState( cards )
  ,
  
  render: function() 
    const cards = this.state.cards.map((card, index) => 
      return <div 
      	key= index  
        className= 
          card.isActive 
            ? 'cards__card cards__card_active' 
            : 'cards__card'
        
        onClick= () => this.handleClick(index) 
      >
         card.name 
      </div>
    );
    
    return <div className="cards">
       cards 
    </div>;
  
);

ReactDOM.render(
  <Сards />,
  document.getElementById('container')
);

.cards 
  border: 1px solid #000;
  padding: 5px;


.cards__card 
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  margin: 5px;
  cursor: pointer;
  display: inline-block;


  .cards__card_active 
    background: red;
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

【参考方案2】：

我建议你试试 jQueryToggle。

$(文档).ready(函数() $("按钮").click(函数() $("p").toggleClass("main"); ); ); 为 p 元素切换类“主”

这是一个段落。

这是另一段。

注意：多次点击按钮可以看到切换效果。