onChange 地图 useState React Hooks 中的输入值答案

【问题标题】：onChange input value in map useState React HooksonChange 地图 useState React Hooks 中的输入值
【发布时间】：2021-03-21 21:05:40
【问题描述】：

我对 useState 输入值有疑问。

我得到了什么：

const [document, setDocument] = useState([
 {
    documentName: '',
    documentDate: '',
    documentInfo: '',
    documentContent: ''
  },
  {
    documentName: '',
    documentDate: '',
    documentInfo: '',
    documentContent: ''
  }
])


return ({
    document.map((item, index) => {
    return (
      <>
        <Grid item xs={3}>
          <label>Typ dokumentu:</label>
          <SelectInput
            fullwidth
            onChange={(e) =>
              setDocument({
                ...document,
                [e.target.name]: document.map((value, j) => {
                  if (index === j) value = e.target.value;
                  return value;
                }),
              })
            }
            value={document.documentName}
            name="documentName"
            register={register}
          />
        </Grid>
        <Grid item xs={1}>
          <label>Sekcja:</label>
          <SelectInput
            fullwidth
            onChange={(e) =>
              setDocument({
                ...document,
                [e.target.name]: document.map((value, j) => {
                  if (index === j) value = e.target.value;
                  return value;
                }),
              })
            }
            value={document.documentDate}
            name="documentDate"
            register={register}
          />
        </Grid>
        <Grid item xs={1}>
          <label>Strefa:</label>
          <SelectInput
            fullwidth
            onChange={(e) =>
              setDocument({
                ...document,
                [e.target.name]: document.map((value, j) => {
                  if (index === j) value = e.target.value;
                  return value;
                }),
              })
            }
            value={document.documentInfo}
            name="documentInfo"
          />
        </Grid>
        <Grid item xs={1}>
          <label>SRS:</label>
          <SelectInput
            fullwidth
            onChange={(e) =>
              setDocument({
                ...document,
                [e.target.name]: document.map((value, j) => {
                  if (index === j) value = e.target.value;
                  return value;
                }),
              })
            }
            value={document.documentContent}
            name="documentContent"
          />
        </Grid>
      </>
    );
  });
}
)

我想要什么？当我在第二个文档中更改例如 documentName 时，我得到了：

[
{
 documentName:'',
 documentDate:'',
 documentInfo:'',
 documentContent:''
},
{
 documentName:'DOCUMENTEXAMPLENAME',
 documentDate:'',
 documentInfo:'',
 documentContent:''
}
]

我无法构造 onChange 函数，我按照上面描述的方式设置这些数据。

我尝试使用 handleChange 方法，其中：

  const handleChange = (e,index) => {
        const items = [...document]
        items[index][e.target.name] = e.target.value
        setDocument(items)
    }

但是这会改变正确的值，但在每个对象中。

请帮帮我！！

【问题讨论】：

在 handleChange 函数场景的情况下，您如何将值传递给 handlechange 函数
我在输入组件 onChange {handleChange} 内的 onChange 函数中调用它

标签： reactjs forms input react-hooks setstate

【解决方案1】：

写了我的代码here

现在我看到你改变了你的问题，提供了与我写的相同的功能，但在沙盒中它运行良好。也许您的原始代码中还有其他内容？

【讨论】：