Question

我有一个DetailsList，需要跟踪当前选择。我的问题是，当用户更改选择时，我需要更新我的状态，但是当添加新行时，还能够设置选择。如果我正在通过onSelectionChanged监听用户事件，则无法调用setSelectionKey，因为它只会来回循环。

可能相关的是，由于我要添加新行，因此在重新填充项目的渲染器之前无法选择它，但是我不确定何时调用setSelectedKey来确保已完成。

我有一个这样的版本，可以通过设置一个标志来调用setItems然后设置setSelectedKey，同时临时告诉onSelectionChanged忽略它，但是我相信它会导致额外的渲染，并且在所有情况下都无法正常工作。

感谢您的指导。

Answer 1

我知道了。问题是我只是将先前选择的项目设置为选定，例如selection.setKeySelected(item.id, true)。原来，这个秘密就是将所有其他项目都设置为不被选中。以下是相关部分：

const selection = new Selection({ 
  getKey: item => item.id,
  onSelectionChanged: () => {
    the_chosen_one = selection.getSelection()[0];
    // ... do whatever with the item the user just selected ...
  }
});

...

// In some handler when you need to select/re-select an item:
const onWhatever = () => {
  setChangeEvents(false);
  state.items.forEach(item => {
    selection.setKeySelected(item.id, item.id === the_chosen_one.id);
  });
  setChangeEvents(true);
};

...

<DetailsList selection={selection} items={state.items} ...

我不确定setChangeEvents部分是否必要，但是并没有受到伤害。关于此的文档不存在，因此找出它的唯一方法是阅读代码并浏览Github问题，但是很多结果却是死胡同。我仍然不明白为什么我必须明确地取消选择那些从未被选中的项目，但这就是事实。

我希望有一天能对其他人有所帮助。

在Office UI Fabric DetailsList

1 个答案: