reactjs - onChange 地图 useState React Hooks 中的输入值

问题描述

我对 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)
    }

但随后这改变了适当的价值，但在每个人的对象。

请帮我！！

标签： reactjsformsinputreact-hookssetstate

reactjs - onChange 地图 useState React Hooks 中的输入值

问题描述

解决方案

推荐阅读