React教师测验仪表盘动态选项输入值收集优化方案求助

核心思路 #

用数组状态直接存储每个选项的输入值，通过索引定位实时更新对应位置的内容，同时保证输入框有稳定的标识（key）避免重渲染导致失焦。

具体实现代码 #

import { useState } from 'react';

function QuizBuilder() {
  // 初始化题目内容、选项数量、选项值数组
  const [question, setQuestion] = useState('');
  const [optionCount, setOptionCount] = useState(2); // 默认2个选项
  const [options, setOptions] = useState(Array(2).fill(''));

  // 处理选项数量变化
  const handleOptionCountChange = (e) => {
    const newCount = parseInt(e.target.value);
    setOptionCount(newCount);
    // 调整选项数组长度：不足补空，多余截断
    setOptions(prev => {
      const newOptions = [...prev];
      if (newOptions.length < newCount) {
        return [...newOptions, ...Array(newCount - newOptions.length).fill('')];
      } else {
        return newOptions.slice(0, newCount);
      }
    });
  };

  // 处理单个选项输入变化
  const handleOptionChange = (index, e) => {
    // 用函数式更新避免闭包依赖问题
    setOptions(prev => {
      const updated = [...prev];
      updated[index] = e.target.value;
      return updated;
    });
  };

  // 提交表单时收集数据
  const handleSubmit = (e) => {
    e.preventDefault();
    const quizData = {
      question,
      options: options.filter(opt => opt.trim() !== '') // 可选：过滤空选项
    };
    console.log('测验数据:', quizData);
    // 这里可以添加发送到后端的逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>题目内容:</label>
        <input
          type="text"
          value={question}
          onChange={(e) => setQuestion(e.target.value)}
          placeholder="输入题目"
        />
      </div>
      <div>
        <label>选项数量 (2-10):</label>
        <input
          type="number"
          min="2"
          max="10"
          value={optionCount}
          onChange={handleOptionCountChange}
        />
      </div>
      <div>
        <label>选项:</label>
        {options.map((option, index) => (
          <div key={index} style={{ margin: '8px 0' }}>
            <input
              type="text"
              value={option}
              onChange={(e) => handleOptionChange(index, e)}
              placeholder={`选项 ${index + 1}`}
            />
          </div>
        ))}
      </div>
      <button type="submit">保存题目</button>
    </form>
  );
}

export default QuizBuilder;

关键优化点说明 #

1. 实时更新状态：用onChange替代onBlur，每次输入都同步更新对应索引的选项值，不会出现空值无法修改、更新延迟的问题。
2. 稳定的key值：用选项的索引作为key（因选项按顺序生成、不会重排序），保证React能正确识别每个输入框，避免重渲染导致的失焦。
3. 正确更新数组状态：通过复制原数组再修改对应元素的方式更新状态（React状态不可直接修改），也可使用函数式更新避免闭包导致的状态异常。
4. 选项数量自适应：调整选项数量时，自动补充空字符串或截断数组，保证输入框数量与数组长度匹配。

解决你遇到的具体问题 #

• 输入时反复点击输入框：之前的问题是因为无稳定key或错误的状态更新方式导致组件意外重渲染，现在每个输入框都有唯一key，状态更新基于原数组复制，不会触发组件卸载重挂载。
• 第一个输入框存空值且无法修改：之前依赖onBlur触发更新，跳过输入时未触发事件导致空值存入；现在onChange实时同步输入内容，不存在无法修改的情况。

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