Как динамически менять цвет элемента в React?

Question

[Alex Krynytskyi]

Пример такой у меня есть 3 кубика красного цвета. Хочу при клики что бы один ставал синий а остальные ставали красные.
как правильно это сделать в React ?

Comments

[Алексей Скляров]

сделать компонент cube, указать метод: change color и запускать его при клике

[Alex Krynytskyi]

Алексей Скляров,
я не знаю как ко все элементам достучаться.
Что бы при клики менятьвсе на красны а ликнутый на синий.
как получить масив как querySelectorAll?

[Gary_Ihar]

Alex Krynytskyi, заведите родительскую компоненту или стор приложения, где будете хранить информацию для цвета в удобном для вас виде. Завяжите эту информацию с компонентами. В компонентах при клике меняйте ваш стор или Стейт у родительской компоненты.
Понадобится инфа о поднятии события и/или о общем хранилище приложения(MobX я бы рекомендовал для начала)

[Алексей Скляров]

Alex Krynytskyi, я не могу вам сказать за реакт, так как работаю с вью, но логика одинакова везде. Вам необходим компонент (в вашем случае куб). У компонента есть свойство color: default. Вы создаете метод, который будет менять ваше свойство color. например:

changeColor(color) {
      this.color = color;
}

Собственно в самом компоненте вы создаете обычный блок и вешаете на него событие click, по клику вызываете метод changeColor. В атрибуты блока (style, class) записываете ваше свойство color, которое каждый раз при клике по блоку будет меняться с помощью метода changeColor.

Answer 1

[Тигран Абрамян]