Update Star.tsx #197
Update Star.tsx #197
Conversation
fix tabIndex
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
## Walkthrough
本次更改为 `Star` 组件的属性接口 `StarProps` 添加了一个新的可选属性 `tabIndex`（类型为 `number`），并在组件内部支持通过该属性控制星形元素的 tab 索引，而不是始终默认为 0。
## Changes
| 文件 | 变更摘要 |
|----------------|------------------------------------------------------------------|
| src/Star.tsx | 为 `StarProps` 添加了可选属性 `tabIndex?: number`，并在组件中支持外部传入 tab 索引，渲染时根据传入的 `tabIndex` 或禁用状态设置 tabIndex 属性。 |
## Poem
> 星星组件添新意，
> tabIndex 随心移。
> 键盘导航更灵巧，
> 小兔子跳跃欢喜。
> 🐇✨
>
> “tab” 一按，星光闪，
> 代码世界更灿烂！Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/Star.tsxOops! Something went wrong! :( ESLint: 7.32.0 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs[email protected]/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 comments (1)
src/Star.tsx (1)
5-21: 🛠️ Refactor suggestion建议为 tabIndex 属性添加默认值
为了保持向后兼容性，建议在接口定义中为 tabIndex 添加文档注释，并在组件内部设置默认值，以确保现有使用不受影响。
建议修改为：
export interface StarProps { value?: number; index?: number; prefixCls?: string; allowHalf?: boolean; disabled?: boolean; onHover?: (e: React.MouseEvent<HTMLDivElement>, index: number) => void; onClick?: ( e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, index: number, ) => void; character?: React.ReactNode | ((props: StarProps) => React.ReactNode); characterRender?: (origin: React.ReactElement, props: StarProps) => React.ReactNode; focused?: boolean; count?: number; - tabIndex?: numner; + /** + * 自定义 tabIndex 值，用于控制键盘导航顺序 + * @default 0 + */ + tabIndex?: number; }然后在组件内部设置默认值：
tabIndex={disabled ? -1 : tabIndex} + // 或者使用默认值： + tabIndex={disabled ? -1 : (tabIndex ?? 0)}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/Star.tsx(3 hunks)
🔇 Additional comments (2)
src/Star.tsx (2)
36-36: 正确解构了新添加的 tabIndex 属性从 props 中解构 tabIndex 属性的实现是正确的。
91-91: 改进了 tabIndex 处理逻辑将固定的 tabIndex 值改为使用传入的 tabIndex 属性，同时保留了禁用状态下设置为 -1 的逻辑，这样提高了组件的灵活性，允许外部控制 tab 索引。
|
@sorrycc 没人上班吗 |
1 participant
fix tabIndex
Summary by CodeRabbit