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;引入使用时注意事项结尾寄语本封装更多的是提供一种另类错误提示方式的实现方法，大家可以各抒己见进行更多细节的封装，例如错误的显示隐藏过渡效果，错误时输入框文字颜色等等不懂或不足之处，欢迎留言互相探讨学习！