fix(searchbar): 支付宝小程序设置 enableInPageRenderInput 后无法触发 onChange #3130
Conversation
Walkthrough本次更改主要针对搜索栏组件的事件处理和类型定义进行了改进。更新内容涵盖了文件内部导入语句、变量和方法的类型声明，将原有泛型类型替换为更为精确的 Changes
Sequence Diagram(s)sequenceDiagram
participant 搜索栏组件 as Component
participant 环境检测 as EnvChecker
participant 聚焦函数 as FocusFn
搜索栏组件->>环境检测: 检查当前环境
环境检测-->>搜索栏组件: 返回WEB或非WEB状态
alt 环境为WEB
搜索栏组件->>聚焦函数: 调用forceFocus()
else 环境非WEB
搜索栏组件->>搜索栏组件: 不进行聚焦操作
end
Possibly related PRs
Suggested reviewers
Poem
✨ 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
the
action:review
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3130 +/- ##
==========================================
Coverage 86.94% 86.94%
==========================================
Files 280 280
Lines 18475 18475
Branches 2785 2785
==========================================
Hits 16064 16064
Misses 2406 2406
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: 0
🧹 Nitpick comments (3)
src/packages/searchbar/searchbar.taro.tsx (3)
75-81: 事件处理函数使用了更精确的类型定义
onInput函数现在使用BaseEventOrig<InputProps.inputEventDetail>作为参数类型，而不是any，这提高了类型安全性。但是在第78行有一个小问题：
- onChange && onChange?.(eventValue, event) + onChange?.(eventValue, event)同时使用条件检查和可选链是冗余的，只需使用可选链即可。
🧰 Tools
🪛 Biome (1.9.4)
[error] 78-78: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
82-84: focus事件处理函数类型优化
focus函数使用了更精确的BaseEventOrig<InputProps.inputForceEventDetail>类型，提升了类型安全性。建议在83行添加对
event?.detail?.value的空值检查或默认值处理：- onFocus && onFocus(event?.detail?.value, event) + onFocus && onFocus(event?.detail?.value || '', event)🧰 Tools
🪛 Biome (1.9.4)
[error] 83-83: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
160-168: clearaVal函数类型优化和冗余检查
clearaVal函数使用了更精确的ITouchEvent类型，提高了类型安全性。在166行同样存在条件检查和可选链的冗余使用：
- onChange && onChange?.('') + onChange?.('')🧰 Tools
🪛 Biome (1.9.4)
[error] 166-166: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 167-167: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/searchbar/searchbar.taro.tsx(7 hunks)src/types/spec/searchbar/taro.ts(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/searchbar/searchbar.taro.tsx
[error] 78-78: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 83-83: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (8)
src/types/spec/searchbar/taro.ts (2)
1-1: 类型导入和别名定义增强了代码可读性和可维护性引入了
BaseEventOrig、ITouchEvent和InputProps类型，并为InputProps的事件细节创建了三个类型别名，这使得后续的类型定义更加清晰易读。Also applies to: 4-6
13-17: 事件处理器类型定义的改进提高了类型安全性将事件处理器的类型从泛型React事件类型更改为Taro特定的事件类型，更符合小程序环境的实际情况。这样的改动可以解决支付宝小程序设置
enableInPageRenderInput后无法触发onChange的问题，因为现在事件类型与Taro框架实际产生的事件类型一致。src/packages/searchbar/searchbar.taro.tsx (6)
1-1: 优化了导入语句，增加了必要的Taro和组件类型添加了Taro导入以及组件相关的类型定义，为环境检测和事件处理提供了基础。
Also applies to: 3-9
40-40: ref类型增加了null值处理将searchRef类型从
HTMLInputElement改为HTMLInputElement | null，这是一个良好的实践，因为useRef的初始值通常为null。
85-89: blur事件处理函数类型优化
blur函数使用了更精确的BaseEventOrig<InputProps.inputValueEventDetail>类型，并正确处理了blur事件的传递。🧰 Tools
🪛 Biome (1.9.4)
[error] 87-87: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 88-88: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
94-96: 增加了Web环境检测，避免在小程序环境中不必要的DOM操作添加
Taro.getEnv() === 'WEB'条件判断确保只在Web环境下执行forceFocus()，这可以避免在小程序环境中执行不支持的DOM操作，是一个很好的防御性编程实践。
105-107: 增强了TaroInput组件属性和值处理
- 添加了style属性支持，允许更灵活的样式控制
- 使用
(value || '').toString()确保值始终是字符串类型，避免非字符串值导致的问题这些改进增强了组件的健壮性和灵活性。
119-121: clickInput函数使用了更精确的类型定义将
clickInput函数的参数类型从any改为ITouchEvent，与TaroSearchBarProps接口中定义的类型保持一致。🧰 Tools
🪛 Biome (1.9.4)
[error] 120-120: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Summary by CodeRabbit
重构
错误修复