css - 如何仅使反应引导表标题的文本可点击

Question

代码：

<TableHeaderColumn dataField="test" isKey dataSort>Column</TableHeaderColumn>

有了这个，列的整个区域都是可点击的，我只希望文本和人字形是可点击的，我怎样才能做到这一点。

此图像显示整个区域都是可点击的

请帮忙，我被困在这个

这是生成的输出 HTML

Answer 1

您可以使用 css 来禁用使用pointer-events 属性单击某些元素：

pointer-events: none;

这是none财产价值的定义：

none：该元素永远不是鼠标事件的目标；但是，如果这些后代将指针事件设置为其他值，则鼠标事件可能会针对其后代元素。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间适当地触发此父元素上的事件侦听器。

它似乎TableHeaderColumn生成了一些具有特定类的 html，如下所示：

 <th class="sort-column">

你可以写css：

 .sort-column{
 pointer-events:none;

}

禁用单击整列，但这也将禁用单击文本，您需要从子元素（文本）中重置指针事件属性

 .sort-column-child{
   pointer-events:auto;
 }

这是你将如何使用它：

   <TableHeaderColumn dataField="test" isKey dataSort><span class="sort-column-child">Column</span></TableHeaderColumn>