如果表单状态在 react,typescript 中有一个数组，我如何动态处理更改答案

【问题标题】：How can I dynamically handle change if form state has an array in react,typescript如果表单状态在 react,typescript 中有一个数组，我如何动态处理更改
【发布时间】：2022-11-25 04:35:49
【问题描述】：

这是表格的状态：

const [nftMeta, setNftMeta] = useState<NftMetaData>({
    name: "",
    description: "",
    image: "",
    attributes: [
      { trait_type: "attack", value: "0" },
      { trait_type: "health", value: "0" },
      { trait_type: "speed", value: "0" },
    ],
  });

要动态处理“名称”、“描述”和“图像”输入，我可以这样写：

const handleChange = (
    e: ChangeEvent<HTMLInputElement) => {
       const { name, value } = e.target;
       setNftMeta({ ...nftMeta, [name]: value });
  };

但是，我无法弄清楚如何动态处理“属性”更改。我正在尝试编写一个如上所述的通用函数并将其应用于属性输入

【问题讨论】：

标签： reactjs typescript forms events next.js

【解决方案1】：

新方法取名为trait_type

const handleChangeAttribute = (e) => {
  const { name, value } = e.target;
  const newNftMeta: NftMetaData = {
    ...nftMeta,
    attributes: nftMeta.attributes.map((attribute) => {
      if (attribute.trait_type === name) {
        attribute.value = value;
      }
      return attribute;
    }),
  };
  setNftMeta(newNftMeta);
};

<input
  onChange={handleChangeAttribute}
  name="attack"
  value={nftMeta.attributes.find((attribute) => attribute.trait_type === "attack").value}
/>;

【讨论】：