React问卷开发：选项输入框输入时失焦问题求助

焦点丢失的核心问题在于选项列表的key值不稳定：你给选项<li>设置的key是${opt}-${optionIndex}，当在选项输入框中输入内容时，opt的值会实时变化，导致key值随之改变。React发现key变化后，会销毁当前的输入框组件并重新创建一个新的，自然就丢失了焦点。

1. 固定选项的key值 #

将选项的key改为仅依赖questionIndex和optionIndex的组合，确保key值不会随输入内容变化而改变：

修改渲染代码中的选项部分：

{que.options.map((opt, optionIndex) => (
  <li className={classes.optionListItem} key={`${questionIndex}-${optionIndex}`}>
    <label htmlFor={`option_${questionIndex}_${optionIndex}`} className={classes.openListItemLable}>
      <input type="radio" id={`option_${questionIndex}_${optionIndex}`} />
      <input
        className={classes.optionText}
        onChange={(e) => onChangeOptionMCQ(e, questionIndex, optionIndex)}
        placeholder="Option"
        value={opt}
      />
    </label>
  </li>
))}

2. 优化状态更新的不可变性（可选，但推荐） #

虽然当前的状态更新方式能工作，但遵循React的不可变更新原则可以避免潜在的引用问题。修改onChangeOptionMCQ函数为：

const onChangeOptionMCQ = (e, questionIndex, optionIndex) => {
  setQuestions(prevQuestions => {
    // 逐层拷贝，确保不修改原state
    const updatedQuestions = [...prevQuestions];
    const targetQuestion = {...updatedQuestions[questionIndex]};
    const updatedOptions = [...targetQuestion.options];
    updatedOptions[optionIndex] = e.target.value;
    
    targetQuestion.options = updatedOptions;
    updatedQuestions[questionIndex] = targetQuestion;
    
    return updatedQuestions;
  });
};

这样修改后，输入选项内容时，组件不会因为key变化被重新创建，焦点就能保持稳定了——即使使用Material-UI的TextField组件，只要key问题解决，焦点丢失的现象也会消失。

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