代码之家  ›  专栏  ›  技术社区  ›  kirill_igum jfriend00

禁用对行的检查单击详细信息列表

  •  2
  • kirill_igum jfriend00  · 技术社区  · 6 年前

    当前,如果我单击该行,则所有其他行都将取消选中,并且我单击的行将被选中。

    1 回复  |  直到 6 年前
        1
  •  7
  •   Vadim Gremyachev    6 年前

    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