在Office UI Fabric DetailsList中选择新添加的行

import * as React from 'react';
import { DetailsList, Selection } from 'office-ui-fabric-react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    // 初始化数据源和选择器
    this.state = {
      items: [], // 数据源
      selection: new Selection(), // 选择器
    };
  }

  // 添加新的行数据
  addRow = () => {
    const newItem = { id: 1, name: 'New Row' }; // 新行数据
    const updatedItems = [...this.state.items, newItem]; // 更新数据源

    this.setState({ items: updatedItems });
  };

  // 获取当前选中的行数据
  getSelectedRow = () => {
    const selectedItems = this.state.selection.getSelection();
    console.log(selectedItems); // 在控制台打印选中的行数据
  };

  render() {
    const { items, selection } = this.state;

    return (
      <div>
        <button onClick={this.addRow}>添加新行</button>
        <button onClick={this.getSelectedRow}>获取选中行</button>

        <DetailsList
          items={items}
          selection={selection}
          columns={[
            { key: 'id', name: 'ID', fieldName: 'id', minWidth: 50 },
            { key: 'name', name: 'Name', fieldName: 'name', minWidth: 100 },
          ]}
        />
      </div>
    );
  }
}

export default MyComponent;