fix: 修复 Tag 组件在点击关闭时触发 onClick 的问题
#712
Conversation
Walkthrough此次更改涉及 Changes
Possibly related PRs
Poem
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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- packages/base/src/tag/use-tag.ts (1 hunks)
🧰 Additional context used
🔇 Additional comments (1)
packages/base/src/tag/use-tag.ts (1)
69-69: 修复了关闭按钮触发 onClick 的问题添加
e.stopPropagation();是一个很好的解决方案。这行代码阻止了点击事件向上冒泡，从而解决了关闭按钮触发 Tag 组件onClick事件的问题。这个修改：
- 直接解决了 PR 中描述的问题。
- 不影响组件的其他功能。
- 在函数开始时调用，确保即使函数提前返回，事件传播也会被阻止。
| @@ -66,6 +66,7 @@ const useTag = (props: BaseTagProps) => { | |||
| }; | |||
|
|
|||
| const handleClose = (e: React.MouseEvent<HTMLDivElement>) => { | |||
| e.stopPropagation(); | |||
There was a problem hiding this comment.
💡 Codebase verification
缺少 Tag 组件的测试用例
目前未找到与 Tag 组件相关的测试文件。建议添加相应的单元测试，以验证 e.stopPropagation() 的行为并防止未来的回归问题。
🔗 Analysis chain
建议添加注释并考虑测试覆盖
虽然这个修改解决了问题，但我有以下建议：
-
考虑添加一个简短的注释，解释为什么需要
e.stopPropagation()。这将有助于其他开发者理解这行代码的重要性。 -
请确保更新或添加相关的单元测试，以验证这个新行为。这将有助于防止将来可能的回归。
建议的代码修改：
const handleClose = (e: React.MouseEvent<HTMLDivElement>) => {
+ // 阻止事件冒泡，避免触发 Tag 的 onClick 事件
e.stopPropagation();
if (disabled || dismiss !== Finish) {
return;
}
handleDismiss(e);
};为了确保测试覆盖，可以运行以下命令来检查相关测试文件：
这将帮助我们确认是否需要更新现有测试或添加新的测试用例。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索与 Tag 组件相关的测试文件
fd -e test.ts -e test.tsx | grep -i tag
# 如果存在测试文件，显示其内容
test_file=$(fd -e test.ts -e test.tsx | grep -i tag | head -n 1)
if [ -n "$test_file" ]; then
echo "Found test file: $test_file"
echo "Content:"
cat "$test_file"
else
echo "No test file found for Tag component"
fi
Length of output: 210
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
packages/shineout/src/tag/__doc__/changelog.cn.md (1)
1-5: 更改看起来不错，但可以稍作改进。新的更新日志条目准确地描述了修复的问题，并且格式与现有条目一致。然而，我们可以稍微调整一下措辞以提高清晰度。
建议将描述修改为：
- 修复 `Tag` 组件在 `onClose` 时触发 onClick 的问题 + 修复 `Tag` 组件在点击关闭按钮时错误触发 `onClick` 事件的问题这样可以更准确地描述问题的具体情况，使读者更容易理解修复的内容。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- package.json (1 hunks)
- packages/shineout/src/tag/doc/changelog.cn.md (1 hunks)
✅ Files skipped from review due to trivial changes (1)
- package.json
🧰 Additional context used
Types of changes
Changelog
Other information
Summary by CodeRabbit