当前位置:网站首页>Add get disabled for RC form
Add get disabled for RC form
2022-07-07 22:18:00 【Belden wind】
background
In the use of ant Form time , When we need to pass the verification , Button is disabled , however Form Did not provide us with onDisable Methods , What shall I do? ?
terms of settlement
adopt onValuesChange When an validate
const [disabled, setDisabled] = useState(false);// Default inspection failed
const fieldDisabledRef = useRef({
});
const required = ['languages'];// All fields to be verified
const valueChange = changeValue => {
if (!formRef.current) {
return;
}
const values = formRef.current.getFieldsValue();
localStorage.setItem(`${
ID}_skill_info`, JSON.stringify(values));
const changeValueKeys = Object.keys(changeValue);
formRef.current.validateFields(changeValueKeys, (v, error) => {
changeValueKeys.forEach(key => {
if (error && error[key]) {
fieldDisabledRef.current[key] = true;
} else {
fieldDisabledRef.current[key] = false;
}
});
const keys = Object.keys(values);
let disabled = false;
keys.forEach(key => {
const disabledData = fieldDisabledRef.current[key];
if (disabledData === true || disabledData === undefined) {
disabled = true;
}
});
setDisabled(disabled);
});
};
useEffect(() => {
if (formRef.current) {
const data = Object.entries(initObj).reduce((result, [key, value]) => {
if (Array.isArray(value)) {
if (value.length || !required.includes(key)) {
result[key] = value;
}
return result;
}
if (value || !required.includes(key)) {
result[key] = value;
}
}, {
});
formRef.current.setFieldsValue(data);
}
}, [initObj]);
<Form
ref={
formRef}
layout="vertical"
onValuesChange={
valueChange}
initialValues={
...}
>
...
</Form>
That's it , Sometimes it's so simple to change your mind ...
边栏推荐
- Interview question 01.02 Determine whether it is character rearrangement - auxiliary array algorithm
- 大数据开源项目,一站式全自动化全生命周期运维管家ChengYing(承影)走向何方?
- Code of "digital image processing principle and Practice (matlab version)" part2[easy to understand]
- L'enregistreur de disque dur NVR est connecté à easycvr par le Protocole GB 28181. Quelle est la raison pour laquelle l'information sur le canal de l'appareil n'est pas affichée?
- PKPM 2020 software installation package download and installation tutorial
- Ternary expressions, generative expressions, anonymous functions
- Remember that a development is encountered in the pit of origin string sorting
- 为什么Win11不能显示秒数?Win11时间不显示秒怎么解决?
- Typescript TS basic knowledge type declaration
- Px4 autonomous flight
猜你喜欢
Anti climbing killer
[advanced MySQL] index details (I): index data page structure
Use json Stringify() to realize deep copy, be careful, there may be a huge hole
Reptile combat (VII): pictures of the king of reptiles' heroes
客户案例|华律网,通过观测云大幅缩短故障定位时间
Open source OA development platform: contract management user manual
用语雀写文章了,功能真心强大!
Paint basic graphics with custompaint
The function is really powerful!
PKPM 2020 software installation package download and installation tutorial
随机推荐
L'enregistreur de disque dur NVR est connecté à easycvr par le Protocole GB 28181. Quelle est la raison pour laquelle l'information sur le canal de l'appareil n'est pas affichée?
ByteDance senior engineer interview, easy to get started, fluent
648. Word replacement
Jerry's about TWS channel configuration [chapter]
谈谈制造企业如何制定敏捷的数字化转型策略
强化学习-学习笔记9 | Multi-Step-TD-Target
The function is really powerful!
Dbsync adds support for mongodb and ES
Jerry's initiation of ear pairing, reconnection, and opening of discoverable and connectable cyclic functions [chapter]
Leetcode SQL first day
Where is the big data open source project, one-stop fully automated full life cycle operation and maintenance steward Chengying (background)?
Open source OA development platform: contract management user manual
Overseas agent recommendation
[open source] Net ORM accessing Firebird database
Kaggle-Titanic
Oracle advanced (VI) Oracle expdp/impdp details
Navicat connect 2002 - can't connect to local MySQL server through socket '/var/lib/mysql/mysql Sock 'solve
What is the difference between the three values of null Nan undefined in JS
【colmap】稀疏重建转为MVSNet格式输入
The latest Android interview collection, Android video extraction audio