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

在Office UI Fabric中，DetailsList是一种用于显示和操作数据的高度可定制的列表控件。它提供了丰富的功能和样式选项，可以轻松地创建出色的用户界面。

要在DetailsList中选择新添加的行，可以按照以下步骤进行操作：

首先，确保已经引入了Office UI Fabric的相关库和样式表。
在代码中创建一个DetailsList组件，并设置相应的属性和事件处理程序。
在数据源中添加新的行数据，并更新DetailsList的数据源。
在DetailsList的事件处理程序中，获取当前选中的行数据。

以下是一个示例代码片段，演示如何在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;

在上述示例中，我们创建了一个名为MyComponent的React组件，其中包含一个DetailsList控件。通过点击"添加新行"按钮，可以向数据源中添加新的行数据。通过点击"获取选中行"按钮，可以获取当前选中的行数据并在控制台打印出来。

这只是一个简单的示例，你可以根据具体需求进行定制和扩展。如果你想了解更多关于Office UI Fabric DetailsList的信息，可以访问腾讯云的官方文档：Office UI Fabric DetailsList。