如何使反应举表头点击

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的：

无：的元素是永远鼠标事件的目标;然而，如果这些后裔将指针事件设置为某个其他值，则鼠标事件可能会将其后代元素作为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间在它们到/来自后代的路上适当地触发该父元素上的事件侦听器。

看来TableHeaderColumn产生一些HTML代码与特定的类，像这样：

<th class="sort-column"> 

您可以编写CSS：

.sort-column{ 
pointer-events:none; 

}

禁用点击整列，但因为这也将禁用点击文本，你需要重置指针事件属性关闭子元素（吨EXT）

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

这是你将如何使用它：

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