共计 1350 个字符，预计需要花费 4 分钟才能阅读完成。
antd-mobile 默认的是输入框错误处理方式为在输入框右侧显示错误图标，点击图标触发绑定的 onErrorClick 事件，这样显得不够直观，现想利用现有组件参数对其进行封装，达到在右侧不显示错误图标，将错误信息显示到输入框下侧。
官方文档组件地址
Antd Mobile Design –> InputItem
原组件效果
封装后效果
具体变更及实现点（具体可以看下面的封装代码，一看就明白）
props 参数
onErrorClick：原来绑定的是一个点击事件，为了可以不添加多余的属性，且充分利用该属性 (因为右侧错误图标不需要后，该事件便无效了)，现在变为传入一个错误数组或者字符串，用于显示错误提示信息
tipStyle：自定义错误提示语的样式，可以不传入，会使用封装内默认的提示样式，传入则增加或覆盖已有样式
其它参数和官方文档一模一样，文档上怎么用就怎么用
错误提示文字的显示位置
目前封装的是显示位置和输入框输入部分对齐，其实实现方式是复用了 InputItem 的组件样式
注意组件内使用 InputItem 时将 error={false} 放在后面，这样就能避免显示出右侧的错误图标，原理不用多说大家应该也懂的 ^_^ ^_^
完整代码
import React, {Component} from ‘react’;
import {InputItem} from ‘antd-mobile’;
const cls = ‘trust-mobile-input’;
class MobileInputItem extends Component {
render() {
const {type = ‘text’, labelNumber = 5, error = false, children = ”, onErrorClick = ”, tipStyle = {}, …other} = this.props;
const errorTipStyle = {
color: ‘#f5222d’,
padding: ‘5px 0px’,
textAlign: ‘left’,
position: ‘relative’,
fontSize: 12,
…tipStyle
}
return (
<div className={cls}>
<InputItem type={type} {…other} error={false}>{children}</InputItem>
{
error &&
<div className=”am-list-item” style={{height: ‘auto’, minHeight: 0}}>
{
children && <div className={`am-input-label am-input-label-${labelNumber}`}></div>
}
<div className=”am-input-control”>
<div style={{…errorTipStyle}}>
{onErrorClick}
</div>
</div>
</div>
}
</div>
)
}
}
export default MobileInputItem;
引入使用时注意事项
结尾寄语
本封装更多的是提供一种另类错误提示方式的实现方法，大家可以各抒己见进行更多细节的封装，例如错误的显示隐藏过渡效果，错误时输入框文字颜色等等
不懂或不足之处，欢迎留言互相探讨学习！
