限制表选择不起作用 - 材质 UI 表 - 反应

Question

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

所以我在代码沙箱上重新创建了这个问题。 （可能需要一秒钟才能加载）

1. 选择 2（应该禁用表格）
2. 然后选择任何未选中的复选框，它将删除所有禁用的检查并重新启用 供选择的表格。

https://codesandbox.io/s/yw8zl6oqk9

基本上，我想在给定数量的选择处停止用户。而且我只希望用户能够取消选择当前选择的项目。我真的不认为这是最好的方法。我宁愿保持启用检查颜色并将用户停止在 3（任何数字）。如果它大于 3，我已经在 handleClick 函数中尝试了一些其他方法，但它给用户留下了他们无法取消选中或检查的表格。如果您知道如何解决此问题，请告诉我。谢谢！

我被要求提供一个更清晰的用例，所以这里是。

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

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

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

• 用户可以继续选择最多 2 个项目并取消选择以恢复选择能力，只要他们喜欢

The issue im having with this use case is the when the user has selected 2, selectability is supposed to be disabled, when an item that is not selected is selected, it deselects the 2 items that were selected.我发布的沙箱反映了这个问题。

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

希望这对某人有所帮助。