本篇内容主要讲解“antd form表单中怎么嵌套自定义组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“antd form表单中怎么嵌套自定义组件”吧!
<Form.Item label="周期" labelAlign="right">
{getFieldDecorator('cycle', {
rules: [{ required: true, validator: checkCycle }],
initialValue: cycle,
})(<CycleInput cycleOptions={cycleOptions} />)}
</Form.Item>
表单部分可以引入自定义的校验逻辑,如上面的checkCycle :
可以像下面这样,通过Promise.reject()返回错误校验提示,通过Promise.resolve()正确通过校验。
/** 校验生命周期输入内容 */
const checkCycle = useCallback((_, value) => {
const format = value?.split(' ');
if (!format) return Promise.reject(new Error('周期不可为空!'));
/** always 永久保存选项 */
if (format.length < 2 && format[0] === 'always') {
return Promise.resolve();
}
if (format[1] === 'undefined') {
return Promise.reject(new Error('请选择周期!'));
}
const num = +format[0];
if (num > 0 && format[1]) {
return Promise.resolve();
}
return Promise.reject(new Error('请输入大于 0 的数字!'));
}, []);
有关校验的内容,antd也是参考一个成熟的库 async-validator,上面这种写法可以参考文档这块 asyncValidator
如果懒得看文档直接看图:
大概意思就是说,可以通过两种方式来实现一些异步校验:
(1)可以通过调用callback,即asyncValidator的第三个参数,来完成校验
(2)可以通过返回Promise,来完成校验
注意value是该表单域的值,onChange是对应可以改变该表单域的值的方法
const CycleInput = ({ value, onChange, cycleOptions }) => {
const format = value?.split?.(' ');
const num = format?.[0];
const type = format?.[1];
const triggerChange = changedValue => {
onChange && onChange(changedValue);
};
/** 根据后端接口返回的数据,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参数可以展示组件的值,通过onChange方法,可以改变表单域的值,实现了表单带给我们的便捷功能。到此结束啦,快试试吧,实践出真知呀!
到此,相信大家对“antd form表单中怎么嵌套自定义组件”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://blog.csdn.net/wuliCaibao/article/details/123255735