Как применить несколько стилей сразу?

Question

[japan123]

В компоненте Item реализована логика: по клику на задачу - она зачеркивается (выполнена), по клику на кнопку "важная" - текст становится жирным, в тоже время задача может быть важной и выполненной или только важной или выполненной. Как реализовать такую логику?
https://codesandbox.io/s/9p1mql0r4

Comments

[Алексей Ярков]

Вы не умеете применять 2 CSS правила к одному элементу?

[japan123]

Алексей Ярков, что-то подзабыл, посмотрю на ваш вариант решения этой задачи

[Алексей Ярков]

japan123, ну я с телефона уже, поэтому терпите до завтра )) Но направление я указал, ответ рядом.

[0xD34F]

Так, а в чём проблема-то? Насколько я могу видеть, оба стиля успешно применяются. Я чего-то не понимаю, или вы уже сами справились?

[japan123]

0xD34F, при клике на кнопку "важная" применяются сразу оба стиля, хотя ожидаю, что текст выделится жирным, а не зачеркнется

Answer 1

[0xD34F]

Компонент Item, обработчик onImportantClick - надо останавливать всплытие события, чтобы оно не обрабатывалась ещё и в onItemClick, т.е.:

onImportantClick = (e) => {
  e.stopPropagation();
  this.setState(({ important }) => ({
    important: !important
  }));
};

Comments

[japan123]

Благодарю вас!