防止标题单击分组的Office UI Fabric DetailsList

Question

我有一个带有onActiveItemChanged事件的Office UI Fabric Grouped DetailsList。我希望当用户单击组标题本身时不触发该事件。仅当用户单击行时才触发该事件。

我没有找到能提供这种行为的属性，所以我尝试了这种方法：

<DetailsList
    onActiveItemChanged={doSomething}
    groupProps={{
      onRenderHeader: _onRenderGroupHeader
    }}
</DetailsList>

function _onRenderGroupHeader(props) {
    return (
        <div>
          {props.group.name}
        </div>
    );
};

这在Chrome和Edge中都可以使用，但是在IE11中，onActiveItemChanged事件仍然被触发。

有什么想法吗？

Answer 1

我没有找到其他解决方法，但是有了这个技巧：

const doSomething = (item, index, event) => {

    // IE 11 hack
    if (event.target.classList.contains('ms-List-cell')) {
        return false;
    }

    // navigate code here
}