在 DetailsList 中禁用对一行的检查

Question

我想使用检查栏 select 将哪些产品放入购物车。同时，我想单击该行以打开产品视图而不创建 selection。

目前，如果我单击该行，所有其他行都未selected，而我单击的行是selected。

Answer 1

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

allows a branch of the DOM to be marked to ignore input events that alter selections.

以下示例演示如何禁用对行字段的选择，但保留对检查列的选择。解决方案是将行字段（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>
    );
  }
}

这里是a demo

在 DetailsList 中禁用对一行的检查

disable check on a row click in DetailsList

reactjs

office-ui-fabric