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

Question

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

单击每个 childdiv时，我希望将其背景颜色更改为红色。但是如果已经有一个div背景颜色为红色并且div单击了其他一些，则其背景颜色应更改为白色。只有一个div背景颜色为红色。我是新手来反应。我阅读了有关classNames和statesReact 的信息，但不知道我该怎么做。

jsfiddle

提前致谢。

Answer 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>

Answer 2

我建议你试试 jQueryToggle。

    $(文档).ready(函数(){
        $("按钮").click(函数(){
            $("p").toggleClass("main");
        });
    });

    为 p 元素切换类“主”

    
这是一个段落。
    
这是另一段。
    
注意：多次单击按钮可查看切换效果。