Version of antd-mobile
5.42.3
What is this feature about?
背景
目前 Input 组件支持 clareable 清除功能,但 TextArea 组件不支持。为了保持组件功能的一致性,建议为 TextArea 添加相同的清除功能。
解决方案
为 TextArea 组件添加与 Input 组件一致的清除按钮功能。
新增 API
| 属性 |
说明 |
类型 |
默认值 |
| clearable |
是否启用清除图标,点击清除图标后会清空输入框 |
boolean |
false |
| clearIcon |
自定义清除图标 |
ReactNode |
<CloseCircleFill /> |
| onClear |
点击清除按钮后触发 |
() => void |
- |
行为说明
- 当设置
clearable={true} 且输入框有内容时,右侧显示清除按钮
- 点击清除按钮后,清空输入内容并触发
onClear 回调
- 在
disabled 或 readOnly 状态下不显示清除按钮
- 支持通过
ConfigProvider 全局配置 clearIcon
特殊说明
- 出现时清除按钮时,会独占一列,所以输入框宽度会被压缩一点(跟 Input 一致)
- 为了兼容
autoSize,不会支持 onlyShowClearWhenFocus,否则失焦时宽度变化,会导致 TextArea 高度也会抖动
使用示例
<TextArea
placeholder='请输入内容'
clearable
onClear={() => console.log('cleared')}
/>
Version of antd-mobile
5.42.3
What is this feature about?
背景
目前
Input组件支持clareable清除功能,但TextArea组件不支持。为了保持组件功能的一致性,建议为TextArea添加相同的清除功能。解决方案
为
TextArea组件添加与Input组件一致的清除按钮功能。新增 API
booleanfalseReactNode<CloseCircleFill />() => void行为说明
clearable={true}且输入框有内容时,右侧显示清除按钮onClear回调disabled或readOnly状态下不显示清除按钮ConfigProvider全局配置clearIcon特殊说明
autoSize,不会支持onlyShowClearWhenFocus,否则失焦时宽度变化,会导致 TextArea 高度也会抖动使用示例