如果表单状态有数组，如何动态处理更改？react，typescript

js5cn81o 于 2022-11-26 发布在 TypeScript

关注(0)|答案(1)|浏览(119)

这是表单的状态：

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

要动态处理“name”、“description”和“image”输入，我可以编写以下代码：

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

然而，我不知道如何动态处理“属性”的变化。我试图编写一个通用函数，如上所述，并将其应用于属性输入

typescript

来源：https://stackoverflow.com/questions/74565542/how-can-i-dynamically-handle-change-if-form-state-has-an-array-react-typescript

1条答案

按热度按时间

hi3rlvi21#

新方法的名称为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}
/>;

一起

{
  nftMeta.attributes.map((attribute) => {
    return (
      <input
        key={attribute.trait_type}
        name={attribute.trait_type}
        onChange={handleChangeAttribute}
        value={attribute.value}
      />
    );
  });
}

赞(0）回复(0）举报 2022-11-26

我来回答

如果表单状态有数组，如何动态处理更改？react，typescript

1条答案

相关问题

热门标签

最新问答