Как изменять внешний вид элементов по клику?

Question

[Артур]

Сейчас смотрю видео уроки по реакту, разбор состояний state, setState.
В коде ниже работает только одна функция меняющая состояние, а именно onLabelClick. Функция onMarkClick либо не работает, либо срабатывает так же как и onLabelClick, хотя и вызывается на другом объекте - на кнопке.

import React from 'react';
import './todo-list-item.css';

class TodoListItem extends React.Component {
    state = {
        done: false,
        important: false
    };

    onLabelClick = () => {
        this.setState({
            done: true
        });
    };
    onMarkClick = () => {
        this.setState({
            important: true
        });
    }
    render () {
       const { label } = this.props;
       const { done, important } = this.state;
       let classNames = "todo-list-item";
       if (done) {
        classNames +=  " done"
       };
       if (important) {
           classNames += " important"
       };
        return (
         <span>
           <span className= {classNames} 
              onClick= {this.onLabelClick} >{ label }
              <button type="button"  onClick= {this.onMarkClick } ><i className="fa fa-exclamation"/></button>
            </span>
        </span> 
        )
    }
}
export default TodoListItem ;

.todo-list-item.done  {
 text-decoration: line-through;
};

.todo-list-item.important  {
    font-weight: bold;
    color: blue;
}
.fa {
    color: green;
}

Answer 1

[Антон Спирин]

1. Вам надо либо остановить всплытие события:

onMarkClick = (e) => {
    e.stopPropagation();
    this.setState({
      important: true,
    });
  };

либо изменить структуру:

return (
  <span>
    <span
      className={classNames} 
      onClick={this.onLabelClick}
    >
      {label}
    </span>
    <button type="button"  onClick= {this.onMarkClick}>
      <i className="fa fa-exclamation"/>
    </button>        
  </span> 
);

2.

.todo-list-item.done {
  text-decoration : line-through;
}

Comments

[Артур]

То есть беда была в том что обе функции были обернуты в один span с изменяемым классом, верно?

[Антон Спирин]

Артур, нет тут проблема в том, что по клику на кнопку так же срабатывал клик по label.

Answer 2

[0xD34F]

.todo-list-item.done  {
 text-decoration: line-through;
};

Точку с запятой внизу видите? Уберите.

this.setState({
    done: true
});

Может, стоит не тупо true назначать, а переключать текущее значение на противоположное?

<span className= {classNames} 
   onClick= {this.onLabelClick} >{ label }
   <button type="button"  onClick= {this.onMarkClick }

Вынесите кнопку за пределы span'а, чтобы клик по ней не запускал обработчик на span'е.

https://jsfiddle.net/cj25ukzd/

Comments

[Артур]

Точка с запятой это конец документа? Или как это технически объясняется? Ведь ниже стили для класса .fa , и он отображался.

[0xD34F]

Артур, точка с запятой после фигурной скобки - это невалидный css, и как он будет дальше разбираться - хрен его знает.