如何使用整行作为切换开关来切换 office-ui-fabric detailslist 行选择，而不是仅使用小的复选框

Question

我正在使用 Office UI Fabric React 组件，并且我正在尝试改进更改DetailsList的默认选择行为。默认情况下，单击一行和单击右侧的小复选框是有区别的。我希望复选框单击的相同效果应用于行单击。

当您单击复选框时，它会切换行，并且不会像我使用行单击那样取消选择其他行。您还可以在此处使用 shift click 和 control click 以及所有其他不错的点击类型。

我如何才能使单击一行与单击其中一个复选框具有相同的功能？

Answer 1

尝试为 DetailsList 使用这个自定义的 onRenderRow 函数：

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