3

总的来说，我对 React 和 Web 开发有点陌生。

我有一个场景，在 react 中创建一个表，并创建一个可以显示/隐藏 列的框，以及一个全选复选框，该复选框将显示或隐藏除“NAME_ID”列之外的所有列。我可以通过hook的解构调用中的useTable()hook 和 方法来实现前面的部分。column.getToggleHiddenProps()

但我无法实现第二部分，我知道我们有，但除了所需的NAME_ID列getToggleHideAllColumnsProps()之外，这不允许我这样做。

任何帮助或建议都会很棒！

4

1 回答 1

1

有一种方法可以做到这一点。我希望这是一个传递给 Columns 对象的布尔值，但我们会得到我们能得到的。

我分叉了原始的 Hidden Columns 沙箱作​​为概念证明。相关部分是：

  1. getToggleHideAllColumnsProps您需要创建自己的 onClick 处理程序，而不是使用默认道具。column公开一种toggleHidden方法，该方法指示用户尝试切换该特定列时的行为。有点令人沮丧的是，即使您已经toggleHidden为列实现了该方法，getToggleHideAllColumnsProps完全忽略它，并且无论如何切换它的隐藏状态。
<div>
  <IndeterminateCheckbox 
    onClick={() => allColumns.forEach(c => c.id !== "firstName" && c.toggleHidden())} 
  /> 
  Toggle All
</div>

幸运的是，它是一个相当简单的函数——只需遍历您的columns对象并调用toggleHidden每个对象。无论如何，为了稳健性，我在所需的列上包含了一个反对调用它的检查，但从技术上讲，你不需要这样做。

  1. 在某个地方，不知何故，您需要toggleHidden为所需的列定义函数。我在复选框的渲染方法中完成了它，但如果你在其他地方执行它，它的工作原理是一样的。当toggleHidden为列定义函数时，它会按预期覆盖默认行为。因此，您可以只使用一个返回 null 的空函数，这将禁用手动关闭该列的功能。
allColumns.map((column) => {
  if (column.id === "firstName") {
    column.toggleHidden = () => null;
  }
  return ( /* ...jsx... */ );
})
于 2021-04-06T01:18:11.933 回答