javascript - 使用通用函数来处理用户在 REACT 中单击时多个基于数组的相似状态的变化

Question

我在 react 中创建了一个转移列表，其中有两个用于在彼此之间转移名称的框。 (从左列表到右列表)。所以我编写了一个函数handleAllRight，它将左侧列表中的所有元素传输到第二个列表，该列表基本上是数组，并使左侧列表为空，以达到handleAllRight按钮的目的。 现在我又介绍了一个 leftList2 和 rightList2，它们也有一个 handleAllRight 功能。

但是我不会为这两个列表编写一个通用的handleAllRight 函数。 handleAllRight 函数中唯一不同的是列表的编号。 这是我的handleAllRight 函数，我在其中使用了if 循环。但是如果传入任何列表，如何动态创建它。它应该负责检查用户点击的 ID 的传输。

const handleAllRight = listNumber => {
if (listNumber === 1) {
  setRightlist1(leftlist1);
  setleftlist1([]);
}
if(listNumber === 2){
    setRightlist2(leftlist2)
    setleftlist2([]);
}
  };

但我不想使用该条件，因为可能有很多列表，因此它会增加代码行的大小。 我尝试的另一件事是使用 eval 函数。它适用于任意数量的传输列表，但我也不想使用 eval，因为这不是一个好的做法。 例如我这样使用 eval

    const handleAllRight = listNumber => {
        eval(`setRightJobSeq${listNumber}(leftJobSeq${listNumber})`)
        eval(`setleftJobSeq${listNumber}([])`);
}

这是 codeSandbox 链接。 https://codesandbox.io/s/trusting-water-ccymg?file=/src/App.js

Answer 1

使用Eval不是一个好主意。我认为你可以做到这一点。您可以传递 leftList 和函数 setleftlist1 或 setleftlist2、setRightList1 或 setRightList2 作为参数并使用 this

访问动态函数

 const handleAllRight = (leftList, setleftlist, setRightList) => {
       this[setRightList](leftList);
       this[setleftlist]([]);
      };