feat(Textarea): 增加 ref 属性 #3229
Conversation
Walkthrough本次更改主要为 Input 和 TextArea 组件及其 Taro 版本的文档新增了“Ref”章节，详细说明了通过 ref 可访问的实例方法（如 clear、focus、blur、get/nativeElement）。此外，TextArea 组件实现了 ref 转发和实例方法暴露，Input 组件新增了 get 方法，迁移文档同步更新了相关 API 说明。 Changes
Sequence Diagram(s)sequenceDiagram
participant Parent as 父组件
participant TextArea as TextArea组件
participant DOM as 原生textarea
Parent->>TextArea: 通过ref获取组件实例
Parent->>TextArea: 调用ref.current.clear()
TextArea->>DOM: 清空内容
Parent->>TextArea: 调用ref.current.focus()
TextArea->>DOM: 聚焦textarea
Parent->>TextArea: 调用ref.current.blur()
TextArea->>DOM: 失焦textarea
Parent->>TextArea: 调用ref.current.nativeElement
TextArea->>DOM: 返回textarea DOM节点
Suggested reviewers
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. ✨ 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 (
|
github-actions
bot
added
3.x
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3229 +/- ##
=============================================
+ Coverage 86.84% 87.15% +0.30%
=============================================
Files 291 291
Lines 19203 19222 +19
Branches 2914 2930 +16
=============================================
+ Hits 16677 16753 +76
+ Misses 2521 2464 -57
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 (11)
src/packages/textarea/doc.md (1)
98-107: 建议统一组件名称大小写并提升说明清晰度
“通过 ref 可以获取到 Textarea 实例并调用实例方法。”中的 “Textarea” 与文档首部及其它示例中的 “TextArea” 保持不一致，且语句略显简略。建议统一为 “TextArea” 并补充“以下”来明确方法列表：- ### Ref - - 通过 ref 可以获取到 Textarea 实例并调用实例方法。 + ### Ref + + 通过 ref 可以获取到 TextArea 实例，并调用以下实例方法：src/packages/textarea/doc.en-US.md (1)
98-108: 建议优化英文说明及表头术语
- “You can get Ref of Textarea.” 建议改为更通顺的表述，并统一组件名称为
TextArea。- 表格首列标题 “Event” 不够准确，建议改为 “Method”，第三列标题 “Arguments” 建议改为 “Parameters” 以与常规文档保持一致。
- ### Ref - - You can get Ref of Textarea. + ### Ref + + You can access the TextArea instance via ref and invoke the following instance methods: -| Event | Description | Arguments | +| Method | Description | Parameters | | --- | --- | --- |src/sites/sites-react/doc/docs/taro/migrate-from-v2.md (1)
199-199: 建议在方法列表中添加中文顿号分隔
当前列举 ref 支持的方法时缺少逗号或顿号，阅读体验略差。- - 新增 `ref` 属性，支持 `clear` `focus` `blur` `get` 等方法 + - 新增 `ref` 属性，支持 `clear`、`focus`、`blur`、`get` 等方法src/packages/input/doc.md (1)
154-164: 建议补充“以下”并优化说明语句
文中 “通过 ref 可以获取到 Input 实例并调用实例方法。” 建议在“实例方法”前加“以下”，并在“Input”后添加逗号以提升可读性：- ### Ref - - 通过 ref 可以获取到 Input 实例并调用实例方法。 + ### Ref + + 通过 ref 可以获取到 Input 实例，并调用以下实例方法：🧰 Tools
🪛 LanguageTool
[locale-violation] ~156-~156: 'Input' é un xenismo. É preferíbel dicir "entrada"
Context: ...nCompositionEnd` ### Ref 通过 ref 可以获取到 Input 实例并调用实例方法。 | 方法名 | 说明 | 参数 | | --- | -...(GL_BARBARISM_REPLACE)
src/sites/sites-react/doc/docs/react/migrate-from-v2.md (1)
200-200: 建议在方法名称间增加顿号分隔
与其他文档一致，方法列表间建议使用中文顿号分隔，提高可读性：- - 新增 `ref` 属性，支持 `clear` `focus` `blur` `get` 等方法 + - 新增 `ref` 属性，支持 `clear`、`focus`、`blur`、`get` 等方法src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md (1)
183-183: 修正标点及 API 术语格式。
建议将该行改为统一的英文逗号及大写 API 形式，例如：- Add `ref`，and apis `clear` `focus` `blur` `get`. + Add `ref`, and APIs `clear`, `focus`, `blur`, and `get`.🧰 Tools
🪛 LanguageTool
[uncategorized] ~183-~183: A punctuation mark might be missing here.
Context: ...efine the state of the input box. - Addref，and apisclearfocusblurget. - Re...(AI_EN_LECTOR_MISSING_PUNCTUATION)
src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md (1)
183-183: 修正标点及 API 术语格式。
建议将该行改为统一的英文逗号及大写 API 形式，例如：- Add `ref`，and apis `clear` `focus` `blur` `get`. + Add `ref`, and APIs `clear`, `focus`, `blur`, and `get`.🧰 Tools
🪛 LanguageTool
[uncategorized] ~183-~183: A punctuation mark might be missing here.
Context: ...efine the state of the input box. - Addref，and apisclearfocusblurget. - Re...(AI_EN_LECTOR_MISSING_PUNCTUATION)
src/packages/input/doc.zh-TW.md (1)
151-161: 「Ref」區段描述可再精確，便於讀者理解
- 目前「get」方法的說明為「獲取當前容器」，語意偏模糊。建議改為「取得當前
textareaDOM 節點」或「取得目前輸入框元素」，可讓開發者一眼明白返回值。- 「Input」與「Ref」皆為英文專有名詞，文件以繁體中文為主時，通常仍會保留，但可在首次出現時以全形括號補充中文說明，例如：
Ref（轉發引用），提升親和力。- 若後續文件亦需同步更新，建議抽取公共片段，避免多語系文件手動維護時產生不一致。
🧰 Tools
🪛 LanguageTool
[locale-violation] ~153-~153: 'Input' é un xenismo. É preferíbel dicir "entrada"
Context: ...=> void|-` | ### Ref 通過 ref 可以獲取到 Input 實例並調用實例方法。 | 方法名 | 說明 | 參數 | | --- | -...(GL_BARBARISM_REPLACE)
src/packages/input/doc.en-US.md (1)
151-161: Ref 章节措辞与表头命名小幅优化
- 语句 “You can get Ref of Input.” 语法略显生硬，可改为 “You can access the Input instance via a ref.”
- 表头当前使用 “Event”，但所列条目为实例方法，推荐改为 “Method”，保持语义一致。
-You can get Ref of Input. +You can access the Input instance via a ref. -| Event | Description | Arguments | +| Method | Description | Arguments |src/packages/textarea/textarea.tsx (2)
28-36: 为 forwardRef 提供显式 Ref 类型，提升类型安全目前
ref的类型缺失，导致调用端无法获得正确的自动补全与类型校验。可为组件声明一个接口并在forwardRef泛型参数中指定：-export const TextArea = forwardRef( +interface TextAreaRef { + clear: () => void + focus: () => void + blur: () => void + get: () => HTMLTextAreaElement | null +} + +export const TextArea = forwardRef<TextAreaRef>(这样不仅避免了
any带来的潜在问题，也让使用方更直观地了解可调用的方法。
70-76: 受控模式下未对 value 做长度截断，可能导致越界显示
usePropsValue仅对defaultValue调用了format。若父组件以受控模式传入的value长度超出maxLength，textarea 将直接显示超长内容，违背组件约束。建议对受控值同样进行format处理：- value, + value: value !== undefined ? format(value) : undefined,或在
useEffect中监听value并截断。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
src/packages/input/doc.en-US.md(1 hunks)src/packages/input/doc.md(1 hunks)src/packages/input/doc.taro.md(1 hunks)src/packages/input/doc.zh-TW.md(1 hunks)src/packages/textarea/doc.en-US.md(1 hunks)src/packages/textarea/doc.md(1 hunks)src/packages/textarea/doc.taro.md(1 hunks)src/packages/textarea/doc.zh-TW.md(1 hunks)src/packages/textarea/textarea.taro.tsx(7 hunks)src/packages/textarea/textarea.tsx(2 hunks)src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md(1 hunks)src/sites/sites-react/doc/docs/react/migrate-from-v2.md(1 hunks)src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md(1 hunks)src/sites/sites-react/doc/docs/taro/migrate-from-v2.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
src/packages/input/doc.md
[locale-violation] ~156-~156: 'Input' é un xenismo. É preferíbel dicir "entrada"
Context: ...nCompositionEnd` ### Ref 通过 ref 可以获取到 Input 实例并调用实例方法。 | 方法名 | 说明 | 参数 | | --- | -...
(GL_BARBARISM_REPLACE)
src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
[uncategorized] ~183-~183: A punctuation mark might be missing here.
Context: ...efine the state of the input box. - Add ref，and apis clear focus blur get. - Re...
(AI_EN_LECTOR_MISSING_PUNCTUATION)
src/packages/input/doc.zh-TW.md
[locale-violation] ~153-~153: 'Input' é un xenismo. É preferíbel dicir "entrada"
Context: ...=> void|-` | ### Ref 通過 ref 可以獲取到 Input 實例並調用實例方法。 | 方法名 | 說明 | 參數 | | --- | -...
(GL_BARBARISM_REPLACE)
src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
[uncategorized] ~183-~183: A punctuation mark might be missing here.
Context: ...efine the state of the input box. - Add ref，and apis clear focus blur get. - Re...
(AI_EN_LECTOR_MISSING_PUNCTUATION)
src/packages/input/doc.taro.md
[locale-violation] ~156-~156: 'Input' é un xenismo. É preferíbel dicir "entrada"
Context: ...ts/forms/input/) ### Ref 通过 ref 可以获取到 Input 实例并调用实例方法。 | 方法名 | 说明 | 参数 | | --- | -...
(GL_BARBARISM_REPLACE)
🪛 GitHub Check: codecov/patch
src/packages/textarea/textarea.tsx
[warning] 65-66: src/packages/textarea/textarea.tsx#L65-L66
Added lines #L65 - L66 were not covered by tests
[warning] 82-88: src/packages/textarea/textarea.tsx#L82-L88
Added lines #L82 - L88 were not covered by tests
[warning] 111-116: src/packages/textarea/textarea.tsx#L111-L116
Added lines #L111 - L116 were not covered by tests
[warning] 149-150: src/packages/textarea/textarea.tsx#L149-L150
Added lines #L149 - L150 were not covered by tests
[warning] 152-153: src/packages/textarea/textarea.tsx#L152-L153
Added lines #L152 - L153 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (13)
src/packages/textarea/doc.zh-TW.md (1)
97-106: 新增“Ref”小節內容完善。
該部分清晰列出了可透過 ref 調用的實例方法（clear、focus、blur、get），與其他組件文檔保持一致，實現預期功能。src/packages/textarea/doc.taro.md (1)
98-107: 新增“Ref”小節內容完善。
該部分清晰列出了可透過 ref 調用的實例方法（clear、focus、blur、get），文檔說明完整且一致。src/packages/input/doc.taro.md (1)
154-163: 新增“Ref”小節內容完善。
該部分新增 ref 使用說明及實例方法表述清晰，與現有 Input 組件文檔保持一致，提升文檔完備性。🧰 Tools
🪛 LanguageTool
[locale-violation] ~156-~156: 'Input' é un xenismo. É preferíbel dicir "entrada"
Context: ...ts/forms/input/) ### Ref 通过 ref 可以获取到 Input 实例并调用实例方法。 | 方法名 | 说明 | 参数 | | --- | -...(GL_BARBARISM_REPLACE)
src/packages/textarea/textarea.taro.tsx (10)
1-1: 导入 React Hooks 以支持 ref 功能引入了
forwardRef、useRef和useImperativeHandle这三个 React hooks，为组件添加 ref 转发和命令式方法支持，符合需求。
22-22: 组件重构为使用 forwardRef将组件从普通函数组件重构为使用
forwardRef的形式，使组件能够接收并传递 ref。这是实现 ref 功能的必要步骤。
55-60: 将状态变量名从 inputValue 重命名为 innerValue状态变量重命名为
innerValue，提高了命名的语义化和清晰度。在 TextArea 组件中使用innerValue比inputValue更为贴切。
61-61: 添加 textareaRef 引用原生 textarea 元素增加
textareaRef用于引用底层的原生 textarea 元素，为后续实现 focus、blur 等命令式方法提供基础。
67-67: 更新状态设置器以匹配重命名的状态变量将状态设置方法从
setInputValue更新为setInnerValue，与重命名的状态变量保持一致。Also applies to: 69-69
85-100: 通过 useImperativeHandle 暴露命令式方法实现了
useImperativeHandle钩子，通过 ref 暴露以下实例方法：
clear(): 清空输入值focus(): 使文本域获得焦点blur(): 使文本域失去焦点nativeElement: 获取原生文本域元素这些方法提供了对组件的命令式控制，增强了组件的灵活性和可用性。
120-120: 将 ref 传递给原生 Textarea 组件通过将
textareaRef传递给原生 Textarea 组件，使得上面定义的 focus、blur 等命令式方法能够正常工作。
138-138: 更新 value 属性以使用重命名的状态变量将传递给 Textarea 组件的 value 属性从
inputValue更新为innerValue，保持状态变量一致性。
154-154: 更新字符计数显示使用重命名的状态变量将字符计数逻辑中的变量从
inputValue.length更新为innerValue.length，保持代码一致性。
160-160: 组件导出形式更新以适应 forwardRef 模式更新了组件导出的闭合方式，符合使用 forwardRef 的模式规范。这确保了组件能够正确地接收和处理 ref。
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/packages/input/input.taro.tsx(1 hunks)src/packages/input/input.tsx(1 hunks)src/packages/textarea/textarea.taro.tsx(7 hunks)src/packages/textarea/textarea.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/textarea/textarea.taro.tsx
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/textarea/textarea.tsx
[warning] 65-66: src/packages/textarea/textarea.tsx#L65-L66
Added lines #L65 - L66 were not covered by tests
[warning] 82-88: src/packages/textarea/textarea.tsx#L82-L88
Added lines #L82 - L88 were not covered by tests
[warning] 111-117: src/packages/textarea/textarea.tsx#L111-L117
Added lines #L111 - L117 were not covered by tests
[warning] 150-151: src/packages/textarea/textarea.tsx#L150-L151
Added lines #L150 - L151 were not covered by tests
[warning] 153-154: src/packages/textarea/textarea.tsx#L153-L154
Added lines #L153 - L154 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (6)
src/packages/input/input.taro.tsx (1)
91-91: 新增 get 方法增强了组件的 ref API新增的
get方法提供了一种更明确的方式来获取底层输入元素的引用，与现有的nativeElementgetter 功能相似但更符合常规方法调用模式。这种方式让开发者可以更灵活地操作输入元素。src/packages/input/input.tsx (1)
88-88: 新增 get 方法增强了组件的 ref API新增的
get方法提供了一种更明确的方式来获取底层输入元素的引用，与现有的nativeElementgetter 功能相似但更符合常规方法调用模式。这种实现与 Taro 版本保持一致，确保了跨平台的 API 一致性。src/packages/textarea/textarea.tsx (4)
2-7: 成功引入 forwardRef 相关依赖引入了必要的 React 钩子函数，特别是
forwardRef和useImperativeHandle，为组件添加了 ref 转发功能。这是实现组件 ref API 的基础。
28-36: 成功将组件转换为 forwardRef 函数组件将 TextArea 组件从标准函数组件转换为使用
forwardRef的组件，使其能够接收并正确处理来自父组件的 ref。类型定义也进行了相应更新，确保了类型安全。
70-75: 状态变量命名更加明确将状态变量从
inputValue重命名为innerValue，更准确地反映了它在 TextArea 组件中的用途，提高了代码可读性。
77-79: 依赖数组更新以包含 innerValueuseEffect 依赖数组中包含了
innerValue，确保当文本区域内容变化时正确更新高度（当 autoSize 为 true 时）。这是一个很好的修复，确保自动调整大小功能正常工作。
| useImperativeHandle(ref, () => ({ | ||
| clear: () => setInnerValue(''), | ||
| focus: () => textareaRef.current?.focus(), | ||
| blur: () => textareaRef.current?.blur(), | ||
| get: () => textareaRef.current, | ||
| get nativeElement() { | ||
| return textareaRef.current | ||
| }, | ||
| })) |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
成功实现 ref API 方法暴露
通过 useImperativeHandle 成功暴露了一组实例方法，包括 clear、focus、blur、get 和 nativeElement getter。这些方法提供了对文本区域元素的完整控制能力。
注意：静态分析工具显示这部分代码没有测试覆盖，建议添加相应的单元测试确保这些方法按预期工作。
🏁 Script executed:
#!/bin/bash
# 检查组件是否有相应的测试文件
echo "查找 TextArea 组件的测试文件..."
find . -name "textarea*.test.*" -o -name "*textarea*.test.*"
# 检查是否有任何测试用例测试了 ref 功能
echo "查找可能测试 ref 功能的测试用例..."
rg -i "ref|useimperativehandle|forwardref" --type ts --type tsx --type js --type jsx -g "*test*" ./src/packages/textarea/Length of output: 322
为了准确验证是否已对 useImperativeHandle 暴露的 ref 方法添加了测试，请执行以下脚本：
🏁 Script executed:
#!/bin/bash
# 查找 TextArea 组件下所有测试文件
echo "查找 TextArea 组件的测试文件..."
find src/packages/textarea -type f \( -iname "*.test.ts" -o -iname "*.test.tsx" -o -iname "*.spec.ts" -o -iname "*.spec.tsx" \)
# 在这些测试文件中查找对 ref API 的测试用例
echo "查找可能测试 ref 功能的测试用例..."
rg -i "useImperativeHandle|forwardRef|clear:" -g "*.test.*" src/packages/textareaLength of output: 372
为 ref API 添加单元测试覆盖
在 src/packages/textarea/__test__/textarea.spec.tsx 中未发现对 useImperativeHandle 暴露的以下方法的测试用例：
- clear
- focus
- blur
- get
- nativeElement
建议：
- 在上述测试文件中新增针对每个方法的调用与断言，确保它们按预期清空值、聚焦/失焦并返回原生元素引用。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 111-117: src/packages/textarea/textarea.tsx#L111-L117
Added lines #L111 - L117 were not covered by tests
🤖 Prompt for AI Agents
In src/packages/textarea/textarea.tsx around lines 110 to 118, the ref API
methods exposed via useImperativeHandle (clear, focus, blur, get, nativeElement)
lack unit test coverage. To fix this, add new test cases in
src/packages/textarea/__test__/textarea.spec.tsx that call each of these methods
on the component's ref and assert their expected behavior, such as clearing the
value, focusing and blurring the textarea, and returning the native element
reference.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/packages/textarea/textarea.tsx (1)
110-117: 仍然缺少文档中提到的get()方法根据之前的评审意见，文档中声明通过 ref 可调用
get()方法返回 DOM 元素，但当前实现仍然只暴露了nativeElement属性。这个问题在之前的评审中已经被指出但仍未修复。建议添加
get()方法以保持与文档的一致性：useImperativeHandle(ref, () => ({ clear: () => setInnerValue(''), focus: () => textareaRef.current?.focus(), blur: () => textareaRef.current?.blur(), + get: () => textareaRef.current, get nativeElement() { return textareaRef.current }, }))🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 110-115: src/packages/textarea/textarea.tsx#L110-L115
Added lines #L110 - L115 were not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/packages/textarea/doc.en-US.md(1 hunks)src/packages/textarea/doc.md(1 hunks)src/packages/textarea/doc.taro.md(1 hunks)src/packages/textarea/doc.zh-TW.md(1 hunks)src/packages/textarea/textarea.taro.tsx(7 hunks)src/packages/textarea/textarea.tsx(2 hunks)src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md(1 hunks)src/sites/sites-react/doc/docs/react/migrate-from-v2.md(1 hunks)src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md(1 hunks)src/sites/sites-react/doc/docs/taro/migrate-from-v2.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (9)
- src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
- src/packages/textarea/doc.en-US.md
- src/packages/textarea/doc.zh-TW.md
- src/sites/sites-react/doc/docs/react/migrate-from-v2.md
- src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
- src/packages/textarea/doc.taro.md
- src/packages/textarea/textarea.taro.tsx
- src/packages/textarea/doc.md
- src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/textarea/textarea.tsx
[warning] 64-65: src/packages/textarea/textarea.tsx#L64-L65
Added lines #L64 - L65 were not covered by tests
[warning] 81-88: src/packages/textarea/textarea.tsx#L81-L88
Added lines #L81 - L88 were not covered by tests
[warning] 110-115: src/packages/textarea/textarea.tsx#L110-L115
Added lines #L110 - L115 were not covered by tests
[warning] 148-149: src/packages/textarea/textarea.tsx#L148-L149
Added lines #L148 - L149 were not covered by tests
[warning] 151-152: src/packages/textarea/textarea.tsx#L151-L152
Added lines #L151 - L152 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (4)
src/packages/textarea/textarea.tsx (4)
2-7: 导入语句更新合理正确添加了
forwardRef和useImperativeHandle的导入，为组件添加 ref 转发功能做好了准备。
28-36: 组件声明成功转换为 forwardRef组件正确地转换为
forwardRef形式，类型定义也很完善，支持接收 ref 参数。
70-75: 状态变量重命名提高了代码可读性将
inputValue重命名为innerValue更好地反映了这是组件的内部状态值，提高了代码的可读性。
119-173: JSX 结构保持良好，ref 转发实现正确组件的 JSX 结构保持完整，
textareaRef正确传递给底层的 textarea 元素，enable了 ref 转发功能。所有的事件处理和样式逻辑都得到了保留。🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 148-149: src/packages/textarea/textarea.tsx#L148-L149
Added lines #L148 - L149 were not covered by tests
[warning] 151-152: src/packages/textarea/textarea.tsx#L151-L152
Added lines #L151 - L152 were not covered by tests
| useImperativeHandle(ref, () => ({ | ||
| clear: () => setInnerValue(''), | ||
| focus: () => textareaRef.current?.focus(), | ||
| blur: () => textareaRef.current?.blur(), | ||
| get nativeElement() { | ||
| return textareaRef.current | ||
| }, | ||
| })) |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
ref API 缺少单元测试覆盖
静态分析工具显示 useImperativeHandle 暴露的方法（clear、focus、blur、nativeElement）缺少测试覆盖。这可能导致这些关键功能在未来的重构中出现回归问题。
建议在 src/packages/textarea/__test__/textarea.spec.tsx 中为每个暴露的方法添加测试用例：
🏁 Script executed:
#!/bin/bash
# 检查现有测试文件中是否包含对 ref API 的测试
echo "检查 TextArea 测试文件中的 ref 相关测试..."
rg -A 10 -B 5 "useImperativeHandle|ref\.current|clear|focus|blur" src/packages/textarea/__test__/Length of output: 931
Textarea Ref API 测试补充：新增 clear() 与 nativeElement 覆盖
现有测试已验证 focus/blur 行为，但缺少对 clear 方法及 nativeElement 访问器的覆盖，建议在 src/packages/textarea/__test__/textarea.spec.tsx 中补充以下用例：
- 在渲染组件时通过
ref获取实例：const ref = React.createRef<TextareaRef>() render(<Textarea ref={ref} defaultValue="hello" />)
- clear 方法
- 调用
ref.current?.clear() - 断言底层 textarea 的 value 变为空字符串
- 调用
- nativeElement 访问器
- 读取
ref.current?.nativeElement - 断言其与
container.querySelector('.nut-textarea-textarea')返回的 DOM 节点一致
- 读取
这样可以确保所有暴露的 API 都被单元测试所覆盖，防止未来重构引入回归。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 110-115: src/packages/textarea/textarea.tsx#L110-L115
Added lines #L110 - L115 were not covered by tests
🤖 Prompt for AI Agents
In src/packages/textarea/__test__/textarea.spec.tsx, add unit tests to cover the
ref API methods exposed by useImperativeHandle in
src/packages/textarea/textarea.tsx lines 110-117. Specifically, create a React
ref to the Textarea component, render it with a default value, then test the
clear() method by calling ref.current?.clear() and asserting the textarea's
value is empty. Also test the nativeElement getter by asserting
ref.current?.nativeElement matches the actual DOM textarea element. This will
ensure all exposed ref methods have test coverage.
2 participants
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
clear、focus、blur和nativeElement方法，便于实现内容清空、聚焦、失焦及获取原生元素等操作。clear、focus、blur和get方法，提升交互控制能力。文档