如何只使反应引导程序表标题的文本可单击

Question

代码：

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

有了这个，列的整个区域都是可点击的，我只想让文字和雪佛龙可以点击，我怎么能实现这一点。

This image show that the whole area is clickable

请帮助，我被困在这个

This is the output HTML generated

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>