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

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来改变行的样式
  };
}