Как переключить выбор строки в списке деталей office-ui-fabric, используя весь ряд в качестве переключателя, а не просто используя маленький крошечный флажок

Question

Я использую компоненты Office UI Fabric React и пытаюсь улучшить изменение поведения выбора по умолчанию для DetailsList .По умолчанию существует разница между щелчком строки и установкой маленького флажка справа.Я хочу, чтобы те же эффекты щелчка флажка применялись к щелчку строки.

Когда вы устанавливаете флажок, он переключает строку и не отменяет выбор других строк, как при использовании щелчка строки.Вы также можете использовать Shift Click и Control Click, а также все другие приятные типы кликов здесь.

Как сделать так, чтобы нажатие на строку имело ту же функциональность, что и нажатие на один из флажков?

Answer 1

Попробуйте использовать эту пользовательскую функцию onRenderRow для DetailsList:

onRenderRow = (props: IDetailsRowProps, defaultRender?: IRenderFunction<IDetailsRowProps>): JSX.Element => {
    return (
      <div data-selection-toggle="true">
        {defaultRender && defaultRender(props)}
      </div>
    );
  };

Работает как для SelectionMode.multiple, так и для SelectionMode.single: https://codepen.io/anon/pen/YoEzzE