如何构建一个稳定响应的 React Select 组件

react 中 select 组件失焦后重置、需多次点击才生效，通常是因为未正确绑定受控状态——缺少 `value` 属性导致组件行为退化为非受控模式。

在 React 中， 是受控组件（controlled component），必须同时满足两个条件才能稳定工作：
✅ 通过 value 属性显式绑定当前值；
✅ 通过 onChange 处理函数同步更新该值。

你当前的代码中仅设置了 onChange，却遗漏了 value={difficulty}，这会导致 React 在某些生命周期（如失焦、重新渲染）时忽略内部状态，自动回退到初始 placeholder 状态，甚至触发“点击多次才响应”的异常行为——本质上是 React 将其识别为非受控组件，并在后续渲染中尝试接管或冲突所致。

Favird No-Code Tools

无代码工具的聚合器

下载

✅ 正确写法（修复版）

import { EnumDifficulty } from "@/components/Utils/EnumDifficulty";
import { useState } from "react";

const MyForm = () => {
  const [difficulty, setDifficulty] = useState<string | undefined>(undefined);

  return (
    <FormControl isRequired>
      <FormLabel>Niveau</FormLabel>
      <Select 
        placeholder="Sélectionner le niveau" 
        value={difficulty || ""} // ✅ 关键：显式绑定 value；空字符串兼容 placeholder 显示
        onChange={(e) => setDifficulty(e.target.value || undefined)}
      >
        {EnumDifficulty.map((diff) => (
          <option key={diff} value={diff}> {/* ✅ 建议用 diff 作 key & value */}
            {diff}
          </option>
        ))}
      </Select>
    </FormControl>
  );
};

⚠️ 注意事项与最佳实践

• key 不要用 uuidv4()：每次渲染生成新 ID 会强制重渲染所有 ，破坏 React 列表复用机制，影响性能和状态一致性。应使用稳定唯一值（如 diff 本身，前提是枚举值不重复）。
• value 类型需匹配：若 difficulty 可为 undefined，建议将 value 设为 difficulty ?? ""，避免 React 警告「value prop on select should not be null」。
• 初始化值要明确：useState(undefined) 比 useState() 更类型安全；若需默认选中某项，可设为 useState("Medium") 并确保该值存在于 EnumDifficulty 中。
• Chakra UI 用户注意：如果你使用的是 Chakra UI 的 组件（而非原生 ），它同样遵循受控组件规范，value 和 onChange 缺一不可。

✅ 总结

Select 不稳定 ≠ UI 库问题，而是 React 受控组件的基本契约未被满足。只要补全 value 属性、确保 key 稳定、value 与 option.value 严格对应，即可实现即点即选、失焦不重置、响应零延迟的稳定体验。