reactjs 使用React通过表单输入更改对象数组中对象的值

j5fpnvbx 于 2022-11-22 发布在 React

关注(0)|答案(2)|浏览(127)

大家好，我是一个新的 React ，我试图使一个锻炼跟踪器，但我已经成为顽固的尝试捕捉输入的练习，我喜欢的方式，你可以看到许多注解掉的代码块，我认为我错过了一些基本的 useState 可能？
这是我使用状态

const [formData, setFormData] = useState({
    title: "",
    date: "",
    exercises: [{ Exercise: "benchpress", Reps: "5", Sets: "5" }],
  });

中的每一个
这与标题和日期一起工作，但我尝试了许多方法，都无法让它与 exercise 数组中的对象一起工作
这是表单输入上的 onChange 函数

const updateForm = (e) => {
    setFormData((currentFormData) => ({
      ...currentFormData,
      [e.target.name]: e.target.value,
    }));

格式
我尝试过的所有解决方案都只是将全新的对象添加到 exercises 数组中，或者只是将名称 + 值添加到原始对象的标题和日期旁边。

reactjs

来源：https://stackoverflow.com/questions/74531351/change-value-of-objects-inside-array-of-object-with-form-input-with-react

2条答案

按热度按时间

0lvr5msh1#

setFormData(formData.map((line, i) => {
    line.title= "";
    line.date="",
    line.exercises.map((lineExerc, j) => {
        lineExerc.name = e.target.value;
     });
return line;
}));

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

368yc8dk2#

嘿，尝试这样做，它将更新您的练习名称，您可以添加更多的输入字段，以更新更多的值

import * as React from 'react'
const Comp = () => {
  const [formData, setFormData] = React.useState({
    title: '',
    date: '',
    exercises: [{ Exercise: 'benchpress', Reps: '5', Sets: '5' }]
  })

  React.useEffect(() => {
    console.log('gg', formData)
  }, [formData])
  const handle = (e, type) => {
    console.log('gg', e)
    setFormData({
      title: formData.title,
      date: formData.date,
      exercises: [
        {
          Exercise: type === 'E' ? e : formData.exercises[0].Exercise,
          Reps: type === 'R' ? e : formData.exercises[0].Reps,
          Sets: type === 'S' ? e : formData.exercises[0].Sets
        }
      ]
    })
  }

  return (
    <>
      <input onChange={(e) => handle(e.target.value, 'E')} />

      <input placeholder="rep" onChange={(e) => handle(e.target.value, 'R')} />
      <input onChange={(e) => handle(e.target.value, 'S')} />
    </>
  )
}

不是最好的方法，但它的工作对于一个数组有大量的对象/字段，你应该使用Map，而不是硬编码

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

我来回答

reactjs 使用React通过表单输入更改对象数组中对象的值

2条答案

相关问题

热门标签

最新问答