总的来说,我对 React 和 Web 开发有点陌生。
我有一个场景,要在 React 中创建一个表,并创建一个框来能够显示/隐藏列,以及一个选中将显示或隐藏所有列的所有复选框, “NAME_ID” 列除外。
我能够通过 useTable()
钩子(Hook)和 column.getToggleHiddenProps()
钩子(Hook)的解构调用方法实现前面的部分。
但我无法实现第二部分,我知道我们有 getToggleHideAllColumnsProps()
但除了必需的 NAME_ID 之外我无法实现专栏。
任何帮助或建议都会很棒!!
最佳答案
有一种方法可以做到这一点。我希望这是一个传递给 Columns 对象的 bool 值,但我们只做了我们能得到的。
I forked the original Hidden Columns sandbox as a proof of concept.相关部分是:
- 您需要创建自己的 onClick 处理程序,而不是使用默认的
getToggleHideAllColumnsProps
Prop 。column
公开了一个toggleHidden
方法,该方法规定了用户尝试切换该特定列时的行为。有点令人沮丧的是,即使您为列实现了toggleHidden
方法,getToggleHideAllColumnsProps
也会完全忽略它,并切换其隐藏状态。
<div>
<IndeterminateCheckbox
onClick={() => allColumns.forEach(c => c.id !== "firstName" && c.toggleHidden())}
/>
Toggle All
</div>
幸运的是,这是一个相当简单的函数——只需遍历您的 columns
对象并在每个对象上调用 toggleHidden
。为了稳健性,我包含了一个检查,无论如何都不要在所需的列上调用它,但从技术上讲,您不需要这样做。
- 在某处,不知何故,您需要为所需的列定义
toggleHidden
函数。我在复选框的渲染方法中完成了它,但如果你在其他地方这样做,它的工作原理是一样的。当为列定义toggleHidden
函数时,它会按预期覆盖默认行为。因此,您可以只使用一个返回 null 的空函数,这样就无法手动关闭该列。
allColumns.map((column) => {
if (column.id === "firstName") {
column.toggleHidden = () => null;
}
return ( /* ...jsx... */ );
})
关于reactjs - react 表列隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66929341/