如何從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"
   }
}