Запретить щелчок по заголовку в сгруппированном списке сведений о структуре пользовательского интерфейса Office

#javascript #reactjs #office-ui-fabric

#javascript #reactjs #office-ui-fabric

Вопрос:

У меня есть сгруппированный список сведений о структуре пользовательского интерфейса Office с onActiveItemChanged событием. Я хочу, чтобы событие не запускалось, когда пользователь нажимает на сам заголовок группы. Событие должно запускаться только тогда, когда пользователь нажимает на строку.

Я не нашел свойства, которое обеспечивало бы такое поведение, поэтому вместо этого я попробовал этот подход:

 <DetailsList
    onActiveItemChanged={doSomething}
    groupProps={{
      onRenderHeader: _onRenderGroupHeader
    }}
</DetailsList>
  
 function _onRenderGroupHeader(props) {
    return (
        <div>
          {props.group.name}
        </div>
    );
};
  

Это работает как в Chrome, так и в Edge, но в IE11 onActiveItemChanged событие все еще запускается.

Есть идеи?

Ответ №1:

Я не нашел другого способа решить эту проблему, кроме как с помощью этого трюка:

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

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

    // navigate code here
}