React中flexbox容器内的onClick点击函数无法触发问题

问题原因及解决方法 #

• 排查项1：检查searchIcon类对应的CSS样式
  如果你给classes.searchIcon设置了pointer-events: none属性，该属性会让元素完全不响应鼠标点击等交互事件，自然触发不了绑定的onClick回调。解决方法：删除该属性，或者显式设置pointer-events: auto即可。
• 排查项2：检查是否有上层元素遮挡
  打开浏览器开发者工具的元素选择功能，点击你操作的搜索图标位置，确认选中的元素是否是你绑定了onClick事件的div。如果选中的是其他元素，说明有层级更高的元素挡住了点击区域：可以调整遮挡元素的宽高、位置，或者给绑定事件的div设置更高的z-index值，保证它在交互层级的顶层。
• 排查项3：检查子组件是否阻止了事件冒泡
  如果SearchIcon组件内部绑定了点击事件，且调用了event.stopPropagation()阻止了事件向上冒泡，也会导致父级div的点击事件无法触发。解决方法：移除SearchIcon内部阻止冒泡的代码即可。

内容的提问来源于stack exchange，提问作者CCCC