feat(button): 兼容 taro components#3188
Conversation
Walkthrough本次变更为 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Button
participant TaroButton
User->>Button: 传入 props（含 formType, nativeType）
Button->>Button: 解构 props，优先使用 formType
Button->>TaroButton: 传递 formType（优先 formType，无则 nativeType）
Suggested reviewers
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ 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:
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 (
|
github-actions
bot
added
action:review
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3188 +/- ##
==========================================
Coverage 86.60% 86.61%
==========================================
Files 289 289
Lines 18742 18742
Branches 2821 2822 +1
==========================================
+ Hits 16232 16233 +1
+ Misses 2505 2504 -1
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![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
🧹 Nitpick comments (1)
src/packages/button/button.taro.tsx (1)
30-45: 建议考虑添加文档注释说明新属性为了让开发者更好地理解
formType属性的用途及其与nativeType的关系，建议添加适当的文档注释。export interface ButtonProps extends BasicComponent, OmitMiniProgramButtonProps { color: string shape: ButtonShape type: ButtonType size: ButtonSize fill: ButtonFill block: boolean loading: boolean disabled: boolean icon: React.ReactNode rightIcon: React.ReactNode + /** 原生 type 属性，主要用于非小程序环境 */ nativeType: 'submit' | 'reset' // | 'button' + /** 用于控制表单提交行为，优先级高于 nativeType，主要用于小程序环境 */ + formType?: 'submit' | 'reset' | 'button' onClick: (e: MouseEvent<HTMLButtonElement>) => void }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/button/button.taro.tsx(3 hunks)
🔇 Additional comments (3)
src/packages/button/button.taro.tsx (3)
149-149: 代码逻辑修改正确，但需确保不会覆盖现有属性这里将
formType直接赋值给(rest as any).type，这样的修改使得代码更加清晰。但需要确保rest中不会已经包含type属性，以避免意外覆盖。
158-158: 属性传递逻辑优化合理将
formType设置为优先使用传入的值，并在没有提供时回退到nativeType，这种处理方式符合组件属性优先级的最佳实践。这对于兼容 Taro 组件的表单提交行为非常重要。
63-84: 组件兼容性考虑完善此次修改通过添加
formType属性增强了组件在 Taro 环境下的兼容性，使 Button 组件能够更好地适应不同平台特性。这种设计方式符合组件库的跨平台设计理念。
| children, | ||
| className, | ||
| style, | ||
| formType, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
需要在类型定义中添加 formType 属性
当前代码在解构参数时添加了 formType，但在 ButtonProps 接口中并未定义该属性。为了保持类型安全和代码一致性，应当更新接口定义。
建议在 ButtonProps 接口中添加 formType 定义，如下所示：
export interface ButtonProps
extends BasicComponent,
OmitMiniProgramButtonProps {
color: string
shape: ButtonShape
type: ButtonType
size: ButtonSize
fill: ButtonFill
block: boolean
loading: boolean
disabled: boolean
icon: React.ReactNode
rightIcon: React.ReactNode
nativeType: 'submit' | 'reset' // | 'button'
+ formType?: 'submit' | 'reset' | 'button'
onClick: (e: MouseEvent<HTMLButtonElement>) => void
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| formType, | |
| export interface ButtonProps | |
| extends BasicComponent, | |
| OmitMiniProgramButtonProps { | |
| color: string | |
| shape: ButtonShape | |
| type: ButtonType | |
| size: ButtonSize | |
| fill: ButtonFill | |
| block: boolean | |
| loading: boolean | |
| disabled: boolean | |
| icon: React.ReactNode | |
| rightIcon: React.ReactNode | |
| nativeType: 'submit' | 'reset' // | 'button' | |
| formType?: 'submit' | 'reset' | 'button' | |
| onClick: (e: MouseEvent<HTMLButtonElement>) => void | |
| } |
3 participants
🤔 这个变动的性质是？
Summary by CodeRabbit
新功能
formType属性，可更灵活地控制表单提交行为。修复
formType属性优先于nativeType生效。