Question

我在让React Fabric UI DetailsList与React Hooks配合使用时遇到问题。它渲染，但是选择部分不渲染。每当您选择一行时，我希望选择的计数都会更新。但是，我没有看到。看起来选择组件项目永远不会更新，即使用户界面显示它正在被选择。我还看到选择行时会触发onSelectionChange。现在确定是否是因为我正在使用反应钩子或其他什么东西

我采用了提供的有效的类示例：

[Codepen]https://codepen.io/pen/?&editable=true (Example)

与原始照片相同，但被剥离

[Codepen]https://codepen.io/darewreckk/pen/NQRWEd?editors=1111

将其转换为反应挂钩组件。我会期待同样的事情，但我不是，也无法弄清楚有什么不同。

带有钩子的修改示例

[Codepen]https://codepen.io/darewreckk/pen/GVjRNb?editors=1111

任何建议，谢谢，德里克

Answer 1

选择计数存储在要创建的Selection对象上。您可以这样注销：

  const _selection = new Selection({
      onSelectionChanged: () => { 
        console.log('Selected count:' + _selection.count);
      }
  });

只要调用selectionCount，就可以设置selectionDetails和onSelectionChanged的值：

  const _selection = new Selection({
      onSelectionChanged: () => { 
        setSelectionCount(_selection.count);
        setSelectionDetails(`${_selection.count} items selected`)
      }
  });

作为旁注：如果希望selectionDetails在selectionCount更新时进行更新，则可以使用useEffect钩子：

  React.useEffect(() => {
    setSelectionDetails(`${selectionCount} items selected`);
  }, [selectionCount]);

只要selectionCount更新，并且依次更新selectionDetails，上述效果就会运行。

这是一个CodePen：https://codepen.io/anon/pen/QeKWog?editors=0010

如何在React Fabric UI上获取DetailsList / Selection组件以与ReactHooks一起使用？

1 个答案: