問(wèn)題背景
我有兩個(gè)表單項(xiàng)，當(dāng)我選擇出庫(kù)類型，調(diào)用onChange改變inOutType 狀態(tài)，這時(shí)候發(fā)現(xiàn)這句代碼不生效：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-642230.html
rules={[{ required: true, message: `請(qǐng)選擇${Type === 1 ? '持有' : '負(fù)責(zé)'}` }]}
示例代碼
<TypographyForm.Group>
<TypographyForm.Item
label="類型"
name="Type"
col={{ span: 24 }}
rules={[{ required: true, message: '請(qǐng)選擇類型' }]}
>
<Select placeholder="類型" loading={inApplyLoading} onChange={onInOutTypeChange}>
{inApplyType &&
inApplyType.data?.[3]?.map((item) => (
<Select.Option value={item?.dictKey} key={item?.dictKey}>
{item?.dictValue}
</Select.Option>
))}
</Select>
</TypographyForm.Item>
<TypographyForm.Item
label={Type === 1 ? '持有' : '負(fù)責(zé)'}
name="holderCode"
col={{ span: 24 }}
rules={[{ required: true, message: `請(qǐng)選擇${inOutType === 1 ? '持有' : '負(fù)責(zé)'}` }]}
>
<ContactsInput config={{ key: 'holderCode' }} />
</TypographyForm.Item>
原因
antd官方為了盡量少造成多余的渲染，把這個(gè)主動(dòng)權(quán)交由開(kāi)發(fā)者自己來(lái)實(shí)現(xiàn)，適配更多場(chǎng)景，得到相對(duì)優(yōu)秀的渲染性能文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-642230.html
解決代碼
const onInOutTypeChange = (val) => {
setType(val);
// 清除指定字段的規(guī)則
form.setFieldsValue({ holderCode: '' });
handleValidateFields();
};
const handleValidateFields = () => {
form
.validateFields(['holderCode'])
.then((values) => {
// 校驗(yàn)成功后的操作
console.log('校驗(yàn)通過(guò)', values);
})
.catch((errorInfo) => {
// 校驗(yàn)失敗后的操作
console.log('校驗(yàn)失敗', errorInfo);
});
};
到了這里，關(guān)于【Antd】antd form表單的rules文案無(wú)法跟隨狀態(tài)重渲染的原因及解決辦法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
