Question

我很可能在这里没有简单的答案。现在我的桌子上有三元组。如果所选数组的长度大于一个数字，则渲染一个禁用了复选框的表。我还使用禁用的复选框来钩住表的另一个handleClick函数，该复选框只会取消选择。这实际上使复选框变为灰色（禁用了它们），并允许用户取消选中该复选框，以便他们可以收回表格。问题是，如果他们单击以选中尚未选中的选项（此时已禁用），它将删除所有选中的复选框，并再次启用该表以供选择。这是一个问题，因为实际上尚未从我正在使用的实时数据库中删除底层数据。

因此，我在代码沙箱上重新创建了此问题。（可能需要一秒钟才能加载）

选择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

希望这对某人有帮助。

限制表选择不起作用-物料UI表-反应

1 个答案: