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

Question

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

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

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

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

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

How to toggle office-ui-fabric detailslist row selection using the entire row as a toggle instead of just using the small tiny checkbox

javascript

typescript

reactjs

office-ui-fabric