如何让React组件重渲染时保留select选项的选中状态？

你遇到的问题根源是<select>未与recordingMethod状态绑定，属于非受控组件：DOM自身管理的选中状态会随组件销毁而丢失，但组件状态recordingMethod却保留了下来，最终导致UI显示与内部状态不一致。

原代码示例 #

export const ExportDialog = ({ recording, ... }: { recording: boolean, ... } ) => {
  const [recordingMethod, setRecordingMethod] = useState<string>("timeLimit");

  const changeMode = (event: ChangeEvent<HTMLSelectElement>) => setRecordingMethod(event.target.value);

  ...

  return ( <>
    { !recording &&
      <select id="export-method-dropdown" disabled={disableOpts} onChange={changeMode}>
        <option value="timeLimit">using a time limit</option>
        <option value="sampleCount">using a # of samples</option>
        <option value="fileSize">using a file size</option>
      </select>
    }
    ...
    {  /* conditional rendering based on the value of recordingMethod */ }
    ...
  </> )
}

解决方案：将Select改为受控组件 #

只需给<select>添加value属性，绑定到recordingMethod状态，让React完全控制select的选中逻辑：

export const ExportDialog = ({ recording, ... }: { recording: boolean, ... } ) => {
  const [recordingMethod, setRecordingMethod] = useState<string>("timeLimit");

  const changeMode = (event: ChangeEvent<HTMLSelectElement>) => setRecordingMethod(event.target.value);

  ...

  return ( <>
    { !recording &&
      <select 
        id="export-method-dropdown" 
        disabled={disableOpts} 
        onChange={changeMode}
        value={recordingMethod} {/* 新增：绑定状态到选中值 */}
      >
        <option value="timeLimit">using a time limit</option>
        <option value="sampleCount">using a # of samples</option>
        <option value="fileSize">using a file size</option>
      </select>
    }
    ...
    {  /* conditional rendering based on the value of recordingMethod */ }
    ...
  </> )
}

原理说明 #

• 原代码中的<select>是非受控组件，选中状态由浏览器DOM独立管理，当组件因recording变为true被销毁时，DOM节点移除，选中状态也随之丢失；组件重新渲染时，DOM会回到初始默认选中状态。
• 添加value={recordingMethod}后，<select>转为受控组件，选中状态完全由React的recordingMethod状态驱动。只要recordingMethod未被重置，组件重渲染时就会根据状态值自动选中对应选项，确保UI显示与内部状态一致。

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