DetailsList - Office UI Fabric -如何在按钮点击行时突出显示该行？

DetailsList是Office UI Fabric中的一个组件，用于显示具有详细信息的列表。在按钮点击行时，可以通过以下步骤来实现行的突出显示：

首先，需要在按钮的点击事件中获取到所点击的行的数据或索引。
然后，通过修改该行的样式来实现突出显示。可以通过为该行添加一个特定的CSS类来改变其外观。
在CSS中定义该特定的类，并为其指定一个突出显示的样式。可以使用不同的背景色、边框等来突出显示该行。

以下是一个示例代码，演示如何在按钮点击行时突出显示该行：

import * as React from 'react';
import { DetailsList, IColumn, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';

export interface IListItem {
  key: number;
  name: string;
  value: string;
}

export interface IDetailsListExampleState {
  items: IListItem[];
  selectedRow: number | null;
}

export class DetailsListExample extends React.Component<{}, IDetailsListExampleState> {
  constructor(props: {}) {
    super(props);

    this.state = {
      items: [
        { key: 1, name: 'Item 1', value: 'Value 1' },
        { key: 2, name: 'Item 2', value: 'Value 2' },
        { key: 3, name: 'Item 3', value: 'Value 3' },
      ],
      selectedRow: null,
    };
  }

  public render(): JSX.Element {
    const columns: IColumn[] = [
      { key: 'name', name: 'Name', fieldName: 'name', minWidth: 100, maxWidth: 200 },
      { key: 'value', name: 'Value', fieldName: 'value', minWidth: 100, maxWidth: 200 },
    ];

    return (
      <div>
        <DetailsList
          items={this.state.items}
          columns={columns}
          selectionMode={SelectionMode.none}
          onActiveItemChanged={this.onActiveItemChanged}
          onRenderRow={this.onRenderRow}
        />
        <button onClick={this.highlightSelectedRow}>Highlight Selected Row</button>
      </div>
    );
  }

  private onActiveItemChanged = (item: IListItem | undefined, index: number | undefined): void => {
    this.setState({ selectedRow: index });
  };

  private onRenderRow = (props: any): JSX.Element => {
    const { itemIndex, ...rowProps } = props;
    const isSelected = itemIndex === this.state.selectedRow;

    return <div {...rowProps} className={isSelected ? 'highlightedRow' : ''} />;
  };

  private highlightSelectedRow = (): void => {
    // 在这里可以根据this.state.selectedRow来获取到所点击的行的数据或索引
    // 然后通过修改该行的样式来实现突出显示
    // 可以使用DOM操作或者修改state来改变行的样式
  };
}

在上述示例代码中，通过onActiveItemChanged方法获取到所点击的行的索引，并将其保存在selectedRow状态中。然后，在onRenderRow方法中根据selectedRow状态来判断是否为当前行，如果是，则为该行添加highlightedRow类，从而实现突出显示。最后，在highlightSelectedRow方法中可以根据selectedRow状态来获取到所点击的行的数据或索引，并通过修改该行的样式来实现突出显示。

注意：上述示例代码中的样式类highlightedRow需要在CSS中定义，并为其指定突出显示的样式。

这是一个基本的示例，具体的实现方式可能会根据具体的应用场景和需求而有所不同。腾讯云相关产品和产品介绍链接地址可以根据具体需求和场景来选择，可以参考腾讯云的官方文档或咨询腾讯云的技术支持团队获取更详细的信息。