防止header点击分组办公室UI织物细节列表

Question

我有一个 Office UI Fabric Grouped DetailsList 有一个 onActiveItemChanged 事件。当用户单击 组 header 本身时，我希望事件不会触发。仅当用户单击一行时才应触发该事件。

我发现没有属性会产生这种行为，所以我尝试了这种方法：

<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
}

防止header点击分组办公室UI织物细节列表

Prevent header click on grouped Office UI Fabric DetailsList

javascript

reactjs

office-ui-fabric