背景
在使用ant表单的时候,当我们需要在校验不通过时,按钮就禁用,但是Form没有给我们提供onDisable的方法,怎么办呢?
解决办法
通过onValuesChange时进行validate
const [disabled, setDisabled] = useState(false);//默认检验不通过
const fieldDisabledRef = useRef({});
const required = ['languages'];// 所有需要检验的字段
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>
这样就搞定啦,有时候换个思路就是这么简单。。。😄