Компонент Switch компонента Material-ui не запускается

Question

Я положил Switch в приложение, и они работают нормально. Затем я включил переключатели в другое приложение, но они не работают при нажатии.

Оба приложения используют один и тот же компонент. Вот оно работает в одном приложении:

А вот другое приложение, не работающее:

Во втором приложении обработчик onChange, похоже, никогда не запускается.

Код в обоих приложениях выглядит следующим образом:

<Switch
  checked={(console.log('checked:', status === 'visible'), status === 'visible')}
  onChange={(e, c) => console.log('event:', e, c)}
/>

В первом приложении я вижу выходные данные этих console.log с, в то время как во втором приложении я вижу только начальные console.log пропеллера checked, но я никогда не вижу ни одного пропеллера onChange.

Я проверил, есть ли у каких-либо элементов-предков обработчики click, и я не нашел ни одного, который возвращает false, вызывает stopPropagation или preventDefault.

Обратите внимание, что когда я нажимаю, эффект пульсации все еще работает, поэтому обработка щелчка, очевидно, все еще работает.

Есть идеи, почему onChange не может стрелять?

ОБНОВЛЕНИЕ! Я заменил переключатели на обычные <input type="checkbox"> элементы, и это прекрасно работает! См:

Похоже, что-то не так с компонентом <Switch> material-ui. У меня есть предчувствие, что я буду исследовать, когда у меня будет шанс: в приложении может быть более одного React синглтона. Я вернусь, чтобы опубликовать обновление.

Answer 1

Оказывается, в моем случае на странице был CSS, что-то вроде

.some-component { pointer-events: none; }
.some-component * { pointer-events: auto; }

где .some-component содержал мои кнопки и переключатели. Мне пришлось вручную установить pointer-events на all (или какое-то значение, которое я сейчас не помню) для элементов внутри переключателей.

Итак, на это нужно обратить внимание: посмотрите, что делает стиль pointer-events.

Answer 2

Я думаю, это странное исправление, и оно работает без проблем для меня. Таким образом, вместо handleChange я использую handleClick. Я не использую событие здесь, вместо этого я передаю строку, которая, очевидно, является именем состояния или идентификатором в случае массивов.

<Switch
    checked={this.state.active}
    onClick={() => this.handleToggle('active')}
    value="active"
    inputProps={{ 'aria-label': 'secondary checkbox' }}
/>

handleToggle = (name: string) => {
    this.setState({ active: !this.state.active });
};

Я попробовал handleChange, но проблема все еще сохраняется. Надеюсь, это скоро исправят.