求助：点击Glyphicon时React onClick事件无法触发

嘿，我来帮你搞定这个Glyphicon点击没反应的问题！先看你的代码，大概率是这几个原因导致的，咱们一步步来修复：

可能的问题点 #

1. 空<span>的点击区域问题：你给图标span设置了width:'10px',height:'10px'，这个尺寸太小了，很难精准点到；而且空的span标签在部分浏览器里可能无法正确触发点击事件。
2. SortableElement的事件干扰：你用的SortableElement（应该是react-sortable-hoc的组件吧？）内部有拖拽相关的事件处理，可能会拦截子元素的点击事件。

具体解决方案 #

方案1：优化span的点击区域和事件处理 #

先把span的宽高调大一点，加个占位内容确保点击有效，同时加上e.stopPropagation()阻止事件冒泡被SortableElement拦截：

const SortableItem = SortableElement(({value, parentId}) => 
  <ListGroupItem bsStyle='success' style={{width:'300px',textAlign:'left'}}> 
    {value} 
    {parentId === null && 
      <span className='glyphicon glyphicon-remove' 
            style={{float:'right', width:'24px', height:'24px', cursor: 'pointer'}} 
            onClick={e => {
              e.stopPropagation(); // 阻止事件冒泡到父级拖拽组件
              console.log('yes');
            }}>
        &nbsp; {/* 给空span加个占位，确保点击区域有效 */}
      </span>
    } 
  </ListGroupItem> 
);

方案2：用按钮包裹图标（更推荐，语义化+稳定） #

换成按钮标签来包裹Glyphicon，按钮天生支持点击事件，语义化更好，也能避免空span的问题：

const SortableItem = SortableElement(({value, parentId}) => 
  <ListGroupItem bsStyle='success' style={{width:'300px',textAlign:'left', position: 'relative'}}> 
    {value} 
    {parentId === null && 
      <button className='btn btn-link' 
              style={{position: 'absolute', right: '8px', top: '50%', transform: 'translateY(-50%)', padding: 0, border: 'none'}}
              onClick={e => {
                e.stopPropagation();
                console.log('yes');
              }}>
        <span className='glyphicon glyphicon-remove' />
      </button>
    } 
  </ListGroupItem> 
);

你可以先试试方案1，要是还是不行就用方案2，按钮的方式在各种场景下都更稳定哦～

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