在 DetailsList 中禁用对行单击的检查

Question

我想使用检查列来选择要放入购物车的产品。同时，我想单击该行以打开产品视图而不进行选择。

目前，如果我单击该行，则所有其他行都不会被选中，而我单击的行会被选中。

Answer 1

SelectionZone组件 data-selection-disabled属性可用于以下事项：

允许标记 DOM 的分支以忽略改变选择的输入事件。

以下示例演示了如何禁用行字段的选择，但将其保留用于检查列。解决办法是放置DetailsRowFields用元素包裹的行字段（组件）的渲染，<span data-selection-disabled={true}>以防止行选择：

export default class DetailsListCustomSelectionExample extends React.Component<any,any> {
  constructor(props: {}) {
    super(props);
    this.state = {};
    this.renderRow = this.renderRow.bind(this);
  }

  public render() {
    return (
      <DetailsList
        onRenderRow={this.renderRow}
        selectionMode={SelectionMode.multiple}
        items={items}
        setKey="set"
        columns={buildColumns(items)}
      />
    );
  }

  private renderRow(props: IDetailsRowProps) {
    return <DetailsRow rowFieldsAs={this.renderRowFields} {...props} />;
  }

  private renderRowFields(props: IDetailsRowFieldsProps) {
    return (
      <span data-selection-disabled={true}>
        <DetailsRowFields {...props} />
      </span>
    );
  }
}

这是一个演示