选择“Office UI 结构详细信息列表中新添加的行”

Question

我有一个详细信息列表，我需要跟踪当前的选择。我的问题是我需要在用户更改选择时更新我的状态，但也能够在添加新行时设置选择。如果我通过onSelectionChanged监听用户事件，我不能调用setSelectionKey，因为它只会来回循环。

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

我有一个版本，它的工作原理是设置一个标志来调用 setItems，然后设置选择键，同时暂时告诉 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 问题，但其中很多都被证明是死胡同。我仍然不明白为什么我必须明确取消选择最初从未选择过的项目，但事实就是如此。

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