如何从React js中的for循环中的多个文本框获取输入数据并将其传递给Api

Question

我正在尝试构建一个测验应用程序，我想在其中不生成基于管理员输入的问题输入字段。

因此，假设管理员为测验输入了 10 个问题。

然后我在 for 循环中分别呈现 10 个问题及其答案的表单。

我面临的问题是我无法从输入字段中获取所有值。

下面是我的演示代码：

import { useState } from "react";
const MyComponent = () => {
  const [inputs, setInputs] = useState({});
  const handleChange = (e) =>
    setInputs((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value
    }));

  const finalData = (e) => {
    e.preventDefault();
    console.log("data", inputs);
  };

  function buildRows() {
    const arr = [];
    for (let i = 1; i <= 3; i++) {
      arr.push(
        <div key={i} id={i}>
          <input name="Question" onChange={handleChange} />
          <input name="option1" onChange={handleChange} />
          <input name="option2" onChange={handleChange} />
          <input name="option3" onChange={handleChange} />
          <input name="option4" onChange={handleChange} />
        </div>
      );
    }
    return arr;
  }
  return (
    <>
      {buildRows()}
      <button
        onClick={(e) => finalData(e)}
        variant="contained"
        className="button-left"
        sx={{ marginRight: 3.5 }}
      >
        Submit Quiz Questions
      </button>
    </>
  );
};
export default MyComponent;

Answer 1

你可以使用你给你的 div 的id （或任何其他独特的属性，一个独特的名字可能是首选）并用它构建你的 object 作为数组索引，如下所示：

const handleChange = (e) => {
  const parent = e.currentTarget.parentNode;
  const id = parent.id;
  setInputs((prevState) => ({
    ...prevState,
    [id]: {
      ...prevState[id],
      [e.target.name]: e.target.value
    }
  }));
};

这会产生如下所示的 object：

{
   "1":{
      "Question":"1",
      "option1":"2",
      "option2":"3",
      "option3":"4",
      "option4":"5"
   },
   "2":{
      "Question":"6",
      "option1":"7",
      "option2":"8",
      "option3":"9",
      "option4":"11"
   },
   "3":{
      "Question":"22",
      "option1":"33",
      "option2":"44",
      "option3":"55",
      "option4":"66"
   }
}