Как я могу применить classNames в реагировать, чтобы изменить цвет фона одного из дочерних div в React

Question

У меня 3 детей divs завернутый в одного из родителей div как показано:

По клику каждого ребенка divЯ хочу, чтобы его цвет фона был изменен на красный. но если уже есть один div с красным цветом фона и некоторые другие div щелкают, тогда его цвет фона должен быть изменен на белый. Будет только один div с красным цветом фона. Я новичок, чтобы реагировать. Я читал о classNames и states в реакции, но не могу узнать, как я могу это сделать.

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 (функция (){
        $("Кнопка"). Нажмите (функция () {
            $ ("Р") toggleClass("основной").
        });
        });

    Переключить класс "main" для p элементов
Это параграф.
Это еще один абзац.
Примечание. Нажмите кнопку несколько раз, чтобы увидеть эффект переключения.