React中如何在循环中获取多文本框输入并传递至API

问题根源 #

你当前的代码中，循环生成的每一组题目输入框都使用了相同的name属性（比如"Question"、"option1"）。当用户输入内容时，新的输入值会覆盖inputs状态中同name的旧值，导致最终只能获取最后一组输入框的内容。

修复方案 #

给每个输入框的name添加对应的题目索引，保证每个输入框的标识唯一。提交时可以将零散的输入值整理成结构化的题目数组，便于后续处理。

修改后的完整代码 #

import { useState } from "react";

const MyComponent = () => {
  const [inputs, setInputs] = useState({});
  // 存储题目数量，支持管理员动态设置
  const [questionCount, setQuestionCount] = useState(3);

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

  const finalData = (e) => {
    e.preventDefault();
    // 将原始输入值整理成结构化的题目数组
    const quizData = [];
    for (let i = 1; i <= questionCount; i++) {
      quizData.push({
        question: inputs[`Question-${i}`],
        options: [
          inputs[`option1-${i}`],
          inputs[`option2-${i}`],
          inputs[`option3-${i}`],
          inputs[`option4-${i}`]
        ]
      });
    }
    console.log("整理后的测验数据", quizData);
    console.log("原始输入数据", inputs);
  };

  function buildRows() {
    const arr = [];
    for (let i = 1; i <= questionCount; i++) {
      arr.push(
        <div key={i} id={`question-${i}`} style={{ marginBottom: "1rem" }}>
          <h4>第{i}题</h4>
          <input 
            name={`Question-${i}`} 
            placeholder="输入题目内容"
            onChange={handleChange} 
            value={inputs[`Question-${i}`] || ""}
          />
          <div style={{ marginTop: "0.5rem" }}>
            <input 
              name={`option1-${i}`} 
              placeholder="选项1"
              onChange={handleChange} 
              value={inputs[`option1-${i}`] || ""}
            />
            <input 
              name={`option2-${i}`} 
              placeholder="选项2"
              onChange={handleChange} 
              value={inputs[`option2-${i}`] || ""}
              style={{ marginLeft: "0.5rem" }}
            />
            <input 
              name={`option3-${i}`} 
              placeholder="选项3"
              onChange={handleChange} 
              value={inputs[`option3-${i}`] || ""}
              style={{ marginLeft: "0.5rem" }}
            />
            <input 
              name={`option4-${i}`} 
              placeholder="选项4"
              onChange={handleChange} 
              value={inputs[`option4-${i}`] || ""}
              style={{ marginLeft: "0.5rem" }}
            />
          </div>
        </div>
      );
    }
    return arr;
  }

  return (
    <>
      {/* 管理员设置题目数量的输入框 */}
      <div style={{ marginBottom: "1rem" }}>
        <label>题目数量：</label>
        <input
          type="number"
          min="1"
          value={questionCount}
          onChange={(e) => setQuestionCount(Number(e.target.value))}
        />
      </div>
      {buildRows()}
      <button
        onClick={finalData}
        variant="contained"
        className="button-left"
        style={{ marginRight: "3.5rem" }}
      >
        提交测验题目
      </button>
    </>
  );
};

export default MyComponent;

关键修改点 #

1. 给每个输入框的name添加题目索引后缀（如Question-${i}），确保标识唯一，避免值被覆盖。
2. 为输入框添加value属性绑定对应状态，保证输入框的受控性，输入内容实时同步到状态。
3. 新增questionCount状态，支持管理员动态设置题目数量，贴合实际业务需求。
4. 在提交函数中整理出结构化的测验数据，方便后续存储或业务处理。

内容的提问来源于stack exchange，提问作者Lavkush Tari