Antd Mobile Design输入框组件InputItem错误显示方式封装

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;

---

引入使用时注意事项

结尾寄语

• 本封装更多的是提供一种另类错误提示方式的实现方法，大家可以各抒己见进行更多细节的封装，例如错误的显示隐藏过渡效果，错误时输入框文字颜色等等
• 不懂或不足之处，欢迎留言互相探讨学习！