前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载Rate 评分组件用于表达用户对内容的评价在 rsuite 中除了常规可交互状态外还提供了disabled禁用、readOnly只读与plaintext纯文本三种不可交互展示形态分别适用于表单提交后锁定、详情页展示与表单回显等场景。本文以 rsuite 官方文档 disabled.md 中的演示片段为主线结合 src/Rate 目录下的组件源码、样式与测试用例逐一剖析三种状态在视觉、交互与底层实现上的差异帮助你按需选用正确的状态配置。一、三种不可交互状态的官方示例官方文档的 disabled.md 用一个对比示例完整展示了 Disabled、ReadOnly、Plaintext 三种状态的用法示例使用HStack/VStack布局并配合Text标签统一通过defaultValue{2.5}与allowHalf展示半星效果import { Rate, HStack, Text, Divider, VStack } from rsuite; const App () ( VStack divider{Divider /} HStack Text muted w{80} Disabled /Text Rate disabled defaultValue{2.5} allowHalf / /HStack HStack Text muted w{80} ReadOnly /Text Rate readOnly defaultValue{2.5} allowHalf / /HStack HStack Text muted w{80} Plaintext /Text Rate plaintext defaultValue{2.5} allowHalf / /HStack /VStack );三行配置各只对应一个布尔属性即可获得三种完全不同的展示行为。下面分别从视觉表现、交互阻断方式和源码实现三个层面展开。二、disabled完全禁用评分2.1 使用方式与视觉表现disabled是最“彻底”的禁用状态。从 src/Rate/styles/index.scss 的样式可以看出当组件根节点带有data-disabledtrue属性时光标变为禁用光标cursor: var(--rs-cursor-disabled)同时组件整体透明度降为0.5所有字符星标被设置pointer-events: none鼠标点击、悬停均不会触发任何事件。2.2 源码级的交互阻断在 src/Rate/Rate.tsx 中disabled的影响体现在两处容器StyledBox的tabIndex被强制设为-1使整个评分区域从键盘 Tab 导航中移除并同时写入data-disabled与data-readonly两个数据属性每个Character子节点同样传入disabled{disabled || readOnly}src/Rate/Rate.tsx。而 src/Rate/Character.tsx 中的eventHandlers逻辑进一步说明当disabled为true时onClick、onKeyDown、onMouseMove三个事件处理器整体置为null字符的tabIndex也变为-1即从 DOM 层面彻底移除了事件绑定。2.3 测试用例验证src/Rate/test/Rate.spec.tsx 中有两条专门的用例验证禁用行为it(Should disabled,cant click, () { const { container } render(Rate defaultValue{1} disabled /); userEvent.click(container.querySelectorAll(.rs-rate-character)[3]); expect(container.querySelectorAll([data-statusfull])).to.have.length(1); }); it(Should disabled,cant hover, () { const { container } render(Rate defaultValue{1} disabled /); userEvent.hover(container.querySelectorAll(.rs-rate-character)[3]); expect(container.querySelectorAll([data-statusfull])).to.have.length(1); });点击或悬停第四颗星后满星数量始终为 1说明disabled状态下评分值不会发生任何变化。适用场景评分提交后锁定如已评价过的商品、问卷已提交此时值通常是受控的value。三、readOnly只读但保留视觉强度3.1 与 disabled 的差异readOnly同样禁止交互但与disabled有两点显著区别不做透明度降级对比样式表可发现data-readonlytrue的规则仅为字符设置cursor: default与pointer-events: nonesrc/Rate/styles/index.scss组件不会变灰评分结果保持原有视觉强度更适合在详情页、审核页中“醒目地”展示评分从键盘可达性上保留焦点入口不同容器本身仍由tabIndex{disabled ? -1 : 0}控制readOnly状态下容器可聚焦但字符层的disabled{disabled || readOnly}同样会移除各字符的事件处理器见 src/Rate/Character.tsx因此实际无法通过键盘改变评分。3.2 底层实现要点在 src/Rate/Rate.tsx 中readOnly与disabled一样会写入根节点的data-readonly数据属性供样式表精准选择。需要特别说明源码中并没有对readOnly单独执行“值保护”逻辑交互阻断完全依赖样式层的pointer-events: none与字符层的事件移除。因此从代码结构看readOnly更适合用于展示已有评分值的场景搭配value受控使用最为稳妥。四、plaintext纯文本回显4.1 完全脱离星标渲染plaintext与前两者在渲染策略上完全不同——它不再渲染任何星标字符而是直接输出纯文本。看 src/Rate/Rate.tsx 的早退分支if (plaintext) { return ( Plaintext localeKeynotSelected className{className} {!isNil(value) ? ${value}/${max} : null} /Plaintext ); }当值为非空数字时渲染2.5/5这种当前值/最大值格式当值为空null/undefined时子节点为null由 src/internals/Plaintext/Plaintext.tsx 读取localeKey对应的本地化文案作为占位符默认显示 “Not selected”未选择。4.2 测试用例验证src/Rate/test/Rate.spec.tsx 中有两条对应用例it(Should render current value and max value, () { render(Rate value{1} max{5} plaintext /); expect(screen.getByTestId(content)).to.have.text(1/5); }); it(Should render Not selected if value is empty, () { render(Rate value{null} max{5} plaintext /); expect(screen.getByTestId(content)).to.have.text(Not selected); });适用场景表单提交后的详情回显、打印视图、或需要把评分当作普通文本排版例如放进表格单元格、邮件正文时使用。注意此时allowHalf对文本输出没有意义文本格式始终为数值形式的value/max。五、三态对比速查状态属性视觉表现交互能力输出形态典型场景禁用disabled半透明opacity 0.5、禁用光标完全不可交互事件移除 pointer-events none 移出 Tab 序星标已锁定/不可修改的评分只读readOnly正常色彩、default 光标不可点击、不可悬停容器可聚焦星标详情页醒目展示评分纯文本plaintext无星标纯文本无任何交互2.5/5或 “Not selected”表单回显、打印、表格内展示六、与清理cleanable的关系容易混淆的一点是cleanable默认true。它不是独立状态而是影响可交互状态下的“点击已选星标清除评分”行为。在 src/Rate/Rate.tsx 的handleChangeValue中只有当cleanable value nextValue getStarStates(value)[index] starStates[index]时才把值重置为 0。需要强调的是cleanable只在非禁用、非只读时才有意义。当disabled或readOnly为真时事件处理器已被移除见第二节清除逻辑根本不会被触发。测试用例 src/Rate/test/Rate.spec.tsx 也验证了cleanable{false}时重复点击无法清除半星。七、配套属性与受控/非受控说明这三种状态通常与以下属性搭配使用完整表格见 docs/pages/components/rate/en-US/index.md属性类型默认值说明disabledboolean(false)为 true 时无法进行任何交互readOnlyboolean为 true 时无法进行交互视觉不做降级plaintextboolean以纯文本value/max形式展示valuenumber当前值受控defaultValuenumber(0)默认值非受控allowHalfboolean(false)是否支持半选示例中的 2.5 即依赖此属性maxnumber(5)最大分数同时决定纯文本输出中的分母cleanableboolean(true)是否支持点击清除仅在可交互时生效onChange(value, event) void值变化回调受控模式建议配合使用关于受控与非受控defaultValue是首次渲染的初始值后续用户操作由组件内部状态维护value则完全由外部驱动配合onChange使用。在disabled/readOnly场景下推荐使用value直接指定展示值避免内部状态与外部数据不一致。八、总结需要整体弱化、明确不可用时用disabled它会让组件半透明并从事件与焦点系统中完全剥离需要保持视觉强度、仅禁止修改时用readOnly适合详情页展示需要把评分当作文本数据表单回显、打印、表格时用plaintext输出value/max格式三种状态都可以安全地与allowHalf、defaultValue/value、max等属性组合官方示例 disabled.md 即展示了最典型的defaultValue{2.5} allowHalf组合。如需深入阅读实现可依次查看 src/Rate/Rate.tsx、src/Rate/Character.tsx、src/Rate/styles/index.scss 与 src/Rate/test/Rate.spec.tsx。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐rsuite MultiCascader 禁用与只读状态完整指南disabled / disabledItemValues / readOnly / plaintext 实战解析rsuite MultiCascader 禁用与只读状态完整指南disabled / disabledItemValues / readOnly / plai前端UI组件rsuite Cascader 禁用与只读状态全解析disabled、disabledItemValues、readOnly 与 plaintext 实战指南rsuite Cascader 禁用与只读状态全解析disabled、disabledItemValues、readOnly 与 plaintext 实战指南前端UI组件rsuite CheckPicker 禁用与只读状态全解析disabled、disabledItemValues、readOnly 与 plaintext 实战指南rsuite CheckPicker 禁用与只读状态全解析disabled、disabledItemValues、readOnly 与 plaintext 实前端UI组件上一篇Angular-dragdrop移动端适配指南使用touchpunch.js实现触屏拖放的完整教程下一篇5分钟掌握Kickstarter iOS应用的多语言切换实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考