如何使用带有 prevState 的模板字符串与 useState() 挂钩？答案

【问题标题】：How to use template string with prevState in react with useState() hook?如何使用带有 prevState 的模板字符串与 useState() 挂钩？
【发布时间】：2021-07-28 03:45:53
【问题描述】：

在以下表单输入代码中，我使用属性名称作为静态值，它可以工作：

       <input      
        name={inputName}
        type="text"
        placeholder={placeholder}
        value={value}
        onChange={(e) =>
          setValue((prevState) => ({
            ...prevState,
            customerName: e.target.value,
          }))
        }
        style={{ fontFamily: "Jameel Noori Nastaleeq" }}
        readOnly={readOnly}
      />

如果我尝试将其用作作为道具传递给此组件的动态值，但它不起作用，我该怎么做？

动态值错误代码：

      <input
        name={inputName}
        type="text"
        placeholder={placeholder}
        value={value}
        onChange={(e) =>
          setValue((prevState) => ({
            ...prevState,
            ${`valueNameToUpdate`}: e.target.value,
          }))
        }
        style={{ fontFamily: "Jameel Noori Nastaleeq" }}
        readOnly={readOnly}
      />

【问题讨论】：

也许，你需要一些简单的东西：setValue((prevState) => ({ ...prevState, [e.target.name]: e.target.value }))。
好的，这似乎让事情变得更简单了，谢谢！

标签： reactjs react-hooks next.js

【解决方案1】：

使用computed property names - [valueNameToUpdate]。示例：

onChange={(e) =>
  setValue((prevState) => ({
    ...prevState,
    [valueNameToUpdate]: e.target.value,
  }))
}

这也适用于模板字符串。示例：

onChange={(e) =>
  setValue((prevState) => ({
    ...prevState,
    [`${valueNameToUpdate}-${e.target.name}`]: e.target.value,
  }))
}

【讨论】：

【解决方案2】：

试试这个

onChange={(e) =>
      setValue((prevState) => ({
       ...prevState,
       [valueNameToUpdate]: e.target.value,
      }))
}

【讨论】：