#javascript #reactjs #dom #material-ui #dom-events
Вопрос:
У меня есть div с флажком и выпадающим списком выбора (в котором используется ClickAwayListener, не уверен, что это уместно).
Мне разрешено щелкнуть в любом месте этого раздела, чтобы изменить флажок, за исключением Выбора, который не должен изменять флажок, а вместо этого открывать, закрывать и выбирать и элемент, не касаясь флажка.
Проблема в том, что даже при наличии всего кода для предотвращения пузырьков событий флажок все еще меняется, когда я пытаюсь закрыть выбор. Если я вообще взаимодействую с выбором, я не хочу, чтобы флажок менялся. Как я могу это исправить?
Вот демонстрационная версия, иллюстрирующая проблему:
https://codesandbox.io/s/crimson-fast-qll47?file=/src/App.js
Этот gif также показывает, что именно происходит: 
Чтобы воссоздать его, посмотрите, как можно открыть раскрывающийся список, не меняя флажок.
Теперь закройте раскрывающийся список, щелкнув за пределами div. Вы увидите, что флажок изменится. Этого не должно произойти. Как только раскрывающийся список откроется, если я выберу элемент или закрою его, щелкнув в другом месте, флажок не должен меняться.
В любом случае, что я могу сделать, чтобы это исправить?
Спасибо!
Ответ №1:
Хм, мое лучшее предположение заключается в том, Select что компонент перенаправляет click событие с фона на Select компонент, когда вы нажимаете за пределами выбора.
Так как вы ловите только blur событие, также ловить click событие должно сделать свое дело.
https://codesandbox.io/s/thirsty-dream-iy3d2?file=/src/App.js