fix: 修复 Link 组件的disabled状态下可以触发点击事件的问题
#698
Conversation
|
Warning Rate limit exceeded@saint3347 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 11 minutes and 31 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. Walkthrough此次更改涉及多个文件，主要更新了 Changes
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (5)
packages/shineout/src/link/__doc__/changelog.cn.md (1)
1-5: 更改日志条目看起来不错！更改日志条目简洁明了，包含了所有必要的信息：版本号、发布日期和错误修复的描述。这与PR的目标和AI生成的摘要一致。
为了进一步提高清晰度，您可以考虑添加一个简短的说明，解释为什么这个修复很重要。例如：
- 修复 `Link` 组件的disabled状态下可以触发点击事件的问题 ([#698](https://github.com/sheinsight/shineout-next/pull/698)) + 修复 `Link` 组件的disabled状态下可以触发点击事件的问题。这个修复提高了组件的可用性和一致性，确保禁用状态下的链接行为符合用户预期。 ([#698](https://github.com/sheinsight/shineout-next/pull/698))这个额外的解释可以帮助用户更好地理解这个修复的重要性。
packages/shineout/src/link/__example__/03-disabled.tsx (1)
17-17: 考虑优化示例代码以更清晰地展示禁用状态
- 控制台日志消息中存在拼写错误，"不触触发" 应该是 "不触发"。
- 在禁用的链接上添加
onClick处理程序可能会使示例的读者感到困惑。- 建议添加注释来解释这个
onClick处理程序的目的，以便更好地说明禁用状态下不会触发点击事件。建议按如下方式修改代码：
- <Link href="#" type="success" disabled onClick={() => {console.log('不触触发的log')}}>Link</Link> + {/* 禁用状态下，点击事件不会被触发 */} + <Link href="#" type="success" disabled onClick={() => {console.log('这个日志不会被触发')}}>Link</Link>这样可以更清楚地展示禁用状态的行为，并为示例的读者提供更好的上下文。
packages/base/src/link/link.tsx (3)
39-46: 处理禁用状态的点击事件的良好实现新添加的
handleClick函数很好地解决了禁用状态下仍能触发点击事件的问题。实现逻辑正确，并遵循了最佳实践。建议考虑以下小改进：
- 可以使用可选链操作符
?.来简化props.onClick的调用，使代码更简洁。建议如下修改：
- props.onClick?.(e); + props.onClick?.(e);这个改动使代码更加简洁，同时保持了相同的功能。
48-57: 键盘事件处理的良好实现，但可以进一步优化新添加的
handleKeyDown函数通过处理键盘交互提高了组件的可访问性，这是一个很好的改进。然而，我们可以进一步优化这个函数：
- 使用
switch语句来处理不同的按键情况，提高代码的可读性和可维护性。- 将
disabled状态的处理放在最前面，以减少不必要的条件检查。建议如下重构：
const handleKeyDown = (e: React.KeyboardEvent<HTMLAnchorElement>) => { if (disabled) { e.preventDefault(); e.stopPropagation(); return; } switch (e.key) { case 'Enter': props.onClick?.(e as any); break; default: props.onKeyDown?.(e); } }这个重构提高了代码的可读性和效率，同时保持了原有的功能。
63-66: 提高了可访问性，但需要注意一致性这些更改显著提高了组件的可访问性和交互性：
- 添加
aria-disabled属性改善了可访问性，这是一个很好的做法。- 添加
onClick和onKeyDown事件处理程序，将新函数与元素连接起来，实现了预期的交互行为。然而，我注意到
target属性被移除了。请确保这是有意为之的，并且不会对现有功能造成负面影响。为了保持一致性，建议将
disabled状态也应用于href属性：建议如下修改：
- href={disabled ? undefined : href} + href={disabled ? undefined : href}这样可以确保在禁用状态下，链接的所有相关属性都被正确处理。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
- package.json (1 hunks)
- packages/base/src/link/link.tsx (2 hunks)
- packages/shineout/src/link/doc/changelog.cn.md (1 hunks)
- packages/shineout/src/link/example/03-disabled.tsx (1 hunks)
🔇 Additional comments (1)
packages/base/src/link/link.tsx (1)
17-19: 请确认移除target属性的影响您从属性解构中移除了
target，并明确添加了children。这些更改可能会影响链接的行为。
- 移除
target可能会改变链接的打开方式（例如，在新标签页中打开）。请确保这是有意为之的更改，并且不会对现有功能造成负面影响。- 明确添加
children是一个好的做法，提高了代码的可读性。建议运行以下脚本来验证
target属性的使用情况：
package.json
Outdated
| @@ -1,7 +1,7 @@ | |||
| { | |||
| "name": "sheinx", | |||
| "private": true, | |||
| "version": "3.4.2", | |||
| "version": "3.4.3-beta.1", | |||
There was a problem hiding this comment.
💡 Codebase verification
版本更新遗漏
package.json 中的版本号已更新为 "3.4.3-beta.1"，符合修复 bug 的目标。然而，以下文件中仍使用旧版本号 "3.4.2"：
packages/shineout/src/tree/__doc__/changelog.cn.mdpackages/shineout/src/tag/__doc__/changelog.cn.mdpackages/shineout/src/tabs/__doc__/changelog.cn.mdpackages/shineout/src/table/__doc__/changelog.cn.mdpackages/shineout/src/select/__doc__/changelog.cn.mdpackages/shineout/src/input/__doc__/changelog.cn.mdpackages/shineout/src/form/__doc__/changelog.cn.md
请更新这些文件中的版本号以确保一致性。
🔗 Analysis chain
版本更新正确
版本号从 "3.4.2" 更新到 "3.4.3-beta.1" 是正确的。这个更改符合修复bug的目标，同时允许在正式发布之前进行测试。
请运行以下脚本来验证其他相关文件中的版本号是否也已更新：
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查其他可能包含版本号的文件
# 测试：搜索可能包含版本号的文件
echo "检查其他可能包含版本号的文件："
rg -i --type-add 'config:*.{json,js,ts,md}' --type config '3\.4\.3-beta\.1|3\.4\.2'
echo "注意：如果找到了仍然使用旧版本号 '3.4.2' 的文件，可能需要更新它们。"
Length of output: 917
Types of changes
Changelog
Link组件的disabled状态下可以触发点击事件的问题Summary by CodeRabbit
新功能
Link组件的改进。错误修复
Link组件在禁用状态下仍能触发点击事件的问题。文档