React中通过Props修改HTML元素值的实现问题

你的错误根源在于直接在组件渲染阶段操作DOM——React组件还没完成渲染时，document.getElementsByTagName("input")根本拿不到当前组件里的输入元素，自然会出现下标访问未定义的错误。而且这种全局获取input的方式，在多个Question组件存在时还会彻底混乱，完全不符合React的状态管理思路。

下面是具体的重构方案：

1. 重构Question组件：用props直接定义正确选项 #

不要事后修改DOM的value，直接在渲染时就把正确选项的value设为"correct"，其他选项设为"wrong"即可：

export default function Question(props) {
  // 映射选项与对应状态（正确/错误）
  const options = props.options.map((option, index) => ({
    value: index === parseInt(props.correctChoice) ? "correct" : "wrong",
    text: option
  }));

  return (
    <>
      <p>What is {props.equation}</p>
      {options.map((opt, idx) => (
        <div key={idx}>
          <input
            type="radio"
            name={`q${props.questionId}`} // 每个题目用唯一name，避免单选组冲突
            value={opt.value}
            onChange={() => props.onAnswerChange(props.questionId, opt.value)}
          />
          {opt.text}
        </div>
      ))}
      <br />
    </>
  );
}

2. 父组件Quiz管理状态，统计正确答案 #

父组件维护所有题目的选中状态，点击统计按钮时直接基于状态计算选中值为"correct"的数量：

import { useState } from "react";
import Question from "./Question";

export default function Quiz() {
  // 存储每个题目的选中答案，key为题目ID，value为选中的状态值
  const [answers, setAnswers] = useState({});
  // 示例题目数据
  const questions = [
    {
      id: 1,
      equation: "2 + 2",
      options: ["4", "3", "5", "2"],
      correctChoice: 0 // 正确选项的下标
    },
    {
      id: 2,
      equation: "5 - 3",
      options: ["1", "2", "3", "4"],
      correctChoice: 1
    }
  ];

  // 处理单个题目答案变更
  const handleAnswerChange = (questionId, selectedValue) => {
    setAnswers(prev => ({
      ...prev,
      [questionId]: selectedValue
    }));
  };

  // 统计正确答案数量
  const countCorrectAnswers = () => {
    return Object.values(answers).filter(val => val === "correct").length;
  };

  return (
    <div>
      {questions.map(q => (
        <Question
          key={q.id}
          questionId={q.id}
          equation={q.equation}
          options={q.options}
          correctChoice={q.correctChoice}
          onAnswerChange={handleAnswerChange}
        />
      ))}
      <button onClick={() => alert(`正确答案数量：${countCorrectAnswers()}`)}>
        统计得分
      </button>
    </div>
  );
}

核心改进点 #

• 彻底抛弃DOM操作，用React的状态和props管理数据，符合单向数据流理念
• 每个题目使用唯一name属性，避免不同题目的单选组互相干扰
• 统计逻辑基于状态计算，无需查询DOM，更可靠且易于维护

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