Question

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

当前，如果我单击该行，则所有其他行均未选中，而我单击的行已选中。

Answer 1

SelectionZone component 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>
    );
  }
}

这里是a demo

禁用对行的检查，单击DetailsList

1 个答案: