在 React 中使用 onee 方法动态创建和更新相似状态

Question

我正在尝试handleChange对复选框使用单一方法，然后相应地更新它们各自的状态。当我尝试创建动态函数时，调用它的中断。让我知道我在这里做错了什么，可以使用相同的方法更新复选框的检查状态。

失败的功能 -

const handleChange = (event) => {
    const target = event.target;
    const value = target.checked;
    const functionName = `set${target.name}`;
    // console.log(functionName) // functionName = setisItem1 or setisItem2
    functionName(value);
  };

我的沙箱代码 - https://codesandbox.io/s/tender-hooks-guecv?file=/src/App.js[在此处输入链接描述] 1

Answer 1

您的代码所做的相当于"setisItem1"(), 不起作用，因为字符串不是函数。

@yaya 的答案可能会奏效（这就是我最初尝试的方法），但eval可能不安全。

这就是为什么我会这样写：

const functionName = target.name === "isItem1" ? setisItem1 : setisItem2;