您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“antd form表單中怎么嵌套自定義組件”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“antd form表單中怎么嵌套自定義組件”吧!
<Form.Item label="周期" labelAlign="right"> {getFieldDecorator('cycle', { rules: [{ required: true, validator: checkCycle }], initialValue: cycle, })(<CycleInput cycleOptions={cycleOptions} />)} </Form.Item>
表單部分可以引入自定義的校驗(yàn)邏輯,如上面的checkCycle :
可以像下面這樣,通過Promise.reject()返回錯(cuò)誤校驗(yàn)提示,通過Promise.resolve()正確通過校驗(yàn)。
/** 校驗(yàn)生命周期輸入內(nèi)容 */ const checkCycle = useCallback((_, value) => { const format = value?.split(' '); if (!format) return Promise.reject(new Error('周期不可為空!')); /** always 永久保存選項(xiàng) */ if (format.length < 2 && format[0] === 'always') { return Promise.resolve(); } if (format[1] === 'undefined') { return Promise.reject(new Error('請(qǐng)選擇周期!')); } const num = +format[0]; if (num > 0 && format[1]) { return Promise.resolve(); } return Promise.reject(new Error('請(qǐng)輸入大于 0 的數(shù)字!')); }, []);
有關(guān)校驗(yàn)的內(nèi)容,antd也是參考一個(gè)成熟的庫 async-validator,上面這種寫法可以參考文檔這塊 asyncValidator
如果懶得看文檔直接看圖:
大概意思就是說,可以通過兩種方式來實(shí)現(xiàn)一些異步校驗(yàn):
(1)可以通過調(diào)用callback,即asyncValidator的第三個(gè)參數(shù),來完成校驗(yàn)
(2)可以通過返回Promise,來完成校驗(yàn)
注意value是該表單域的值,onChange是對(duì)應(yīng)可以改變?cè)摫韱斡虻闹档姆椒?/p>
const CycleInput = ({ value, onChange, cycleOptions }) => { const format = value?.split?.(' '); const num = format?.[0]; const type = format?.[1]; const triggerChange = changedValue => { onChange && onChange(changedValue); }; /** 根據(jù)后端接口返回的數(shù)據(jù),type 有值,則為 day、week、month、year 其一 */ /** type 若為 undefined,則 num 為 always */ const [cycleOption, setCycleOption] = useState(type ?? num); const [cycleInputValue, setCycleInputValue] = useState( (typeof +num === 'number' && !_.isNaN(+num) && num) || '', ); const onCycleChange = cycleOption => { setCycleOption(cycleOption); triggerChange( cycleOption === 'always' ? cycleOption : `${cycleInputValue} ${cycleOption}`, ); }; const onInputChange = e => { const newNumber = parseInt(e.target.value || '0', 10); if (_.isNaN(newNumber)) { return; } setCycleInputValue(newNumber); triggerChange( cycleOption === 'always' ? cycleOption : `${newNumber} ${cycleOption}`, ); }; return ( <Input.Group> {cycleOption === 'always' ? ( <Select onChange={onCycleChange } defaultValue={cycleOption} style={{ width: 240 }} > {cycleOptions.map(item => ( <Select.Option key={item.value} value={item.value}> {item.label} </Select.Option> ))} </Select> ) : ( <span> <Input value={cycleInputValue} style={{ width: 156 }} onChange={onInputChange} /> <Select onChange={onCycleChange} defaultValue={cycleOption} style={{ width: 84 }} > {cycleOptions.map(item => ( <Select.Option key={item.value} value={item.value}> {item.label} </Select.Option> ))} </Select> </span> )} </Input.Group> ); };
可以看出,自定義部分邏輯也比較簡單,通過value參數(shù)可以展示組件的值,通過onChange方法,可以改變表單域的值,實(shí)現(xiàn)了表單帶給我們的便捷功能。到此結(jié)束啦,快試試吧,實(shí)踐出真知呀!
到此,相信大家對(duì)“antd form表單中怎么嵌套自定義組件”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。