限制表选择不工作 - 材料UI表 - 反应

Question

我在这里错过了简单的答案.现在我的桌子上有一个三元组.如果所选数组长度大于数字,则呈现禁用复选框的表.我还挂钩了一个不同的handleClick函数,表中只有取消选中的禁用复选框.这实际上将复选框变为灰色(禁用它们)并允许用户取消选中,以便他们可以恢复表格.问题是如果他们单击以选择尚未检查的内容(此时已禁用),则会删除所有选定的检查并再次启用该表以供选择.这是一个问题,因为基础数据实际上并未从我正在使用的实时数据库中删除.

所以我在代码沙箱上重新创建了这个问题.(可能需要一秒钟加载)

1. 选择2(应禁用该表)
2. 然后选择任何未选中的复选框,它将删除所有禁用的检查并重新启用该表以供选择.

https://codesandbox.io/s/yw8zl6oqk9

基本上我想要在给定数量的选择下停止用户.我只希望用户能够取消选择当前选择的项目.我真的不认为这是最好的方法.我宁愿保持启用检查颜色,只需将用户停在3(任意数字).我已经在handleClick函数中尝试了一些其他方法,如果它大于3,但它离开了用户的表,他们无法取消选中或检查.如果您有任何想法如何解决这个问题,请告诉我.谢谢!

我被问到一个更清晰的用例,所以这里.

• 用户只能在列表中选择2

• 一旦用户选择2,他们就不能再选择任何其他项目

• 用户可以取消选择一个或多个选定的,然后再次选择最多2个不同的项目

• 用户可以继续选择2个项目,并且只要他们愿意,就可以取消选择以恢复选择能力

具有此用例的问题是当用户选择2时,应该禁用可选择性,当选择未选择的项目时,它取消选择所选择的2个项目.我发布的沙箱反映了这个问题.

Answer 1

我找到了最适合我的用例的解决方案。我不需要三元。我不需要第二个 onclick 函数来处理仅取消选择的情况。这导致了一个问题，因为当用户选择已选择的行时，返回的所选索引是 -1，我没有在 handleRemoveOnly 函数中处理它。我觉得我也不需要。不管怎样，我现在有一个更优雅的解决方案。

对于未选定的行，如果在“-1”上，则单击一次并额外单击一次。不需要像我一样用三元禁用表。这更适合我的用例。

这是一个新的 onclick 函数

   handleClick = (event, id) => {
const { selected } = this.state;
const selectedIndex = selected.indexOf(id);
let newSelected = [];

if (selectedIndex === -1 && selected.length > 1) {
  console.log("hc0::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(selected));
} else if (selectedIndex === -1) {
  console.log("hc1::", selectedIndex);
  newSelected = newSelected.concat(selected, id);
} else if (selectedIndex === 0) {
  console.log("hc2::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
  console.log("hc3::", selectedIndex);
  newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
  console.log("hc4::", selectedIndex);
  newSelected = newSelected.concat(
    selected.slice(0, selectedIndex),
    selected.slice(selectedIndex + 1)
  );
}

这是代码沙箱

坏沙箱： https://codesandbox.io/s/yw8zl6oqk9

固定沙箱： https://codesandbox.io/s/m4vk5w20lx

希望这对某人有帮助。