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;

---

引入使用時注意事項

結尾寄語

• 本封裝更多的是提供一種另類錯誤提示方式的實現方法，你們能夠各抒己見進行更多細節的封裝，例如錯誤的顯示隱藏過渡效果，錯誤時輸入框文字顏色等等
• 不懂或不足之處，歡迎留言互相探討學習！