Почему не срабатывает switch case?

Question

[Алексей Милютин]

Добрый день, не понимаю почему в приведенном коде не срабатывают case, всегда default. Хотя возвращает get Attribute то что нужно.

render() {
        return (
            <div name='list' className="list" onClick={this.handleClick}>
                <div name="checkbox-area" className="checkbox-area">
                    <i name="checkbox" className="fas fa-check checkbox"></i>
                </div>
                <li name="li" onClick={this.handleClick} onMouseOver={this.handleMouse}>{this.props.text}</li>
            </div>
        )
    }

handleClick = (e) => {
        let target = e.target;
        // console.log(target)
        console.log(target.getAttribute('name'))      
        switch (target.getAttribute('name')) {
            case 'checkbox':
                let rout_checkbox = target.style.display;
                rout_checkbox === 'none' ? rout_checkbox = 'block' : rout_checkbox = 'none';
                break;
            case 'checkbox-area':
                let rout_checkbox_area = target.firstChild.style.display;
                rout_checkbox_area === 'none'? rout_checkbox_area = 'block' : rout_checkbox_area = 'none';
                break;
            case 'list':
                let rout_list = target.childNodes[0].firstChild.style.display;
                rout_list === 'none' ? rout_list = 'block' : rout_list = 'none';
            case 'li':
                let rout_li = target.parentNode.childNodes[0].firstChild.style.display;
                rout_li === 'none' ? rout_li = 'block' : rout_li = 'none'; 
            default:
                console.log('error');
                break;
        }
    }

Comments

[Stockholm Syndrome]

break не везде стоит

Answer 1

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

Не надо такой код писать. Работайте с состоянием компонента. Пример:

class ListItem extends React.Component {
  state = { isActive: false };

  toggleClick = {
    this.setState(state => ({ isActive: !state.isActive }));
  };

  render () { /* ... */ }
}

Answer 2

[0xD34F]

не срабатывают case, всегда default

Всё-таки срабатывают.

Почему default случается когда вроде бы не должен - потому что у двух последних case'ов отсутствует break, соответственно, при их выполнении выполняется и default, идущий в самом конце.

Почему вы не видите эффекта от выполнения кода внутри case'ов - да потому что нечего видеть. Вы скопировали значение свойства display в переменную, и эта копия уже никакого отношения к оригиналу не имеет, что бы вы с ней не делали, это никак не отразится на элементе. Чтобы элемент изменился, надо новые значения назначать его свойствам. Но, конечно, не напрямую, а так, как это принято в react'е - заводите в компоненте стейт, на основе значений из стейта в методе render устанавливаете свойства элементам, когда хотите их изменить, обновляете стетйт.

Ещё пара моментов, которые стоит упомянуть:

Почему у вас li вложен в div? Разберитесь, какие элементы куда можно вкладывать, а куда нельзя.

Зачем два одинаковых обработчика клика? Второй, который у li, он не нужен - делает ровно то же, что и первый. Потому что... Почитайте, что такое всплытие событий.

Comments

[Алексей Милютин]

Тут вы правы, но все равно событие не происходит.

[0xD34F]

обновил ответ