0

0

如何实现一个稳定可控的 Select 组件?

心靈之曲

心靈之曲

发布时间:2025-12-30 20:00:12

|

717人浏览过

|

来源于php中文网

原创

如何实现一个稳定可控的 Select 组件?

react 中 select 组件失去选中状态或需多次点击才生效,通常是因为未正确绑定受控值(value)和 onchange 事件,导致组件在重渲染时退回到非受控模式。

要让

你当前的代码中缺失了 value={difficulty},这会导致以下问题:

  • 组件首次渲染时无初始值(difficulty 为 undefined),
  • 当用户选择选项后,React 会尝试“接管”该输入,但因 value 缺失,触发警告(如 Warning: A component is changing an uncontrolled input to be controlled);
  • 后续重渲染(例如点击其他表单字段触发父组件更新)会使 Select 重置为 placeholder 或空状态;
  • 多次点击才能生效,本质是 React 在受控/非受控模式间反复切换造成的渲染不一致。

✅ 正确写法如下(关键修复已加注释):

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

const [difficulty, setDifficulty] = useState(undefined); // 推荐显式类型

return (
  
    Niveau
    
  
);

? 重要注意事项:

商易多用户商城
商易多用户商城

功能介绍:1. 商品出售包含拍卖模式,一口价模式。2. 全套系统采用淘宝网风格,成熟,简洁大方3. 每个商品支持多张图片上传,可自由设定,满足广大网民的迫切要求4. 商品信息支持 ubb,图文并茂5. 注册用户可参与竞拍,或者拍卖自己的商品6. 拥有会员注册,交易提醒,成交商品确认等邮件发送功能7. 拥有交易双方信用评价的功能,使得交易安全可*,可信度高8. 拥有安全稳定的用户虚拟币平台,可实现商

下载
  • 不要用 uuidv4() 作为 key:每次渲染生成新 ID,会强制销毁并重建所有
  • 为 value 提供明确初始值:若允许“未选择”状态,可用 undefined 或空字符串,但需确保 placeholder 逻辑兼容;若必选,建议初始化为首个有效值(如 useState(EnumDifficulty[0]))。
  • 类型安全增强(TypeScript 推荐)
    const [difficulty, setDifficulty] = useState(undefined);
    // 并将 EnumDifficulty 定义为 const enum 或类型别名,提升类型推导准确性

? 总结:React 表单元素(

相关专题

更多
js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

248

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

205

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1434

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

609

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

546

2024.03.22

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式:单引号;双引号;heredoc语法等等。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

539

2024.04.29

go语言字符串相关教程
go语言字符串相关教程

本专题整合了go语言字符串相关教程,阅读专题下面的文章了解更多详细内容。

157

2025.07.29

c++字符串相关教程
c++字符串相关教程

本专题整合了c++字符串相关教程,阅读专题下面的文章了解更多详细内容。

77

2025.08.07

桌面文件位置介绍
桌面文件位置介绍

本专题整合了桌面文件相关教程,阅读专题下面的文章了解更多内容。

0

2025.12.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.1万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 0.9万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号