基於antd封裝的固話元件

最近基於ant design pro框架，著手乙個專案的研發，在乙個業務模組中，需要使用者輸入座機號，最開始，就在form中放乙個input，讓使用者輸入，但是這樣就碰到乙個問題：如何保證使用者的輸入是相同的，資料落庫如何保持一致？

進過對業務場景的分析，在乙個輸入框中，通過正則來判斷座機號，似乎有點麻煩，既然如此，那就乾脆直接點，直接分成三個輸入框。這個想法沒有問題，但是如何布局？如何校驗？如何拼接乙個完整的座機號？

在表單中，乙個getfielddecorator裡只能包含乙個受控元件，否則，js指令碼會報錯，其實這裡也不難理解，如果有多個受控元件，表單的值改變，是改變那個元件的value呢？

如果將三個輸入框，分別放在三個formitem中，這樣一方面，ui布局需要二次調整較多，另一方面，因為三個輸入值，存在一定的關聯關係，分開校驗，比較麻煩，且校驗的提示語在那個formitem下，這個樣式調整也比較麻煩。

針對以上的情況，選擇自定義封裝乙個受控元件，在元件裡去做具體的邏輯操作判斷。

import react,  from 'react';

import  from 'antd';
const inputgroup = input.group;
class telphone extends purecomponent 
componentdidmount()  = this.props;
const codearr = value.split('-');
this.setstate()
}  changetel = e => = this.state
const  = e.currenttarget
codearr[id] = value.replace(/^\s+|\s+$/gm,'');
if(id==2&&value.length==0)
const str = codearr.join('-');
if(str!=this.props.value)
}  render() = this.state
return ()}}
export default telphone;

-)([2-9][0-9])+(-[0-9])?$/,

message: '請輸入正確的座機號'
}, ],
})()}

在子元件中，input的值發生改變，則可通過props.onchange，將子元件中處理好的座機號傳遞到父元件中，在父元件中直接獲取值。

座機號的正則/^(0[0-9]-)([2-9][0-9])+(-[0-9])?$/，區號0開頭3或4位，座機號2開頭7或8位，分機號最多4位。

antd上傳元件upload踩坑和封裝

效果圖 1 公共元件封裝 將antd中的上傳元件進行改進 不同檔案格式使用不同上傳樣式 增加上傳限制 大小，數量，尺寸 uploadcustom.js import from ant design icons import from antd import axios from axios impo...

VIA無線固話的串列埠切換問題

via的無線固話串列埠的切換復用是靠gi04控制的，gi04控制晶元的第10腳，控制方法如下 hwdwrite hwd nm gp 8bit,hwdread hwd nm gp 8bit uint16 0x01 4 mode 設定工作模式 hwdwrite hwd gpio dir 8bit,hwd...

React修改Antd元件樣式的方法

1 f12開啟除錯，選中elements選項 2 在elements的元素樹中選中相應的antd元件布局，然後檢視右端的css樣式表，找到控制項的css控制器結構。3 最後在我們自己的css樣式檔案中修改對應的控制器屬性就可以了 4 有一些屬性是在antd元件內部通過 設定的，這種情況下，通過上面那...