在 DetailsList 中禁用對一行的檢查

Question

我想使用檢查欄來選擇將哪些產品放入購物車。 同時，我想單擊該行以打開產品視圖而不進行選擇。

目前，如果我單擊該行，則所有其他行都未被選中，而我單擊的行被選中。

Answer 1

SelectionZone組件data-selection-disabled屬性可用於以下事項：

允許標記 DOM 的一個分支以忽略改變選擇的輸入事件。

以下示例演示如何禁用對行字段的選擇，但為檢查列保留它。 解決方案是放置用元素<span data-selection-disabled={true}>包裹的行字段（ DetailsRowFields組件）的呈現，以防止行選擇：

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

這是一個演示