被設(shè)置了 name 屬性的 Form.Item 包裝的控件引瀑，表單控件會(huì)自動(dòng)添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性）蛛碌，數(shù)據(jù)同步將被 Form 接管像街，這會(huì)導(dǎo)致以下結(jié)果：
你不再需要也不應(yīng)該用 onChange 來做數(shù)據(jù)收集同步（你可以使用 Form 的 onValuesChange）瓶竭，但還是可以繼續(xù)監(jiān)聽 onChange 事件宝鼓。
你不能用控件的 value 或 defaultValue 等屬性來設(shè)置表單域的值着逐，默認(rèn)值可以用 Form 里的 initialValues 來設(shè)置砚婆。注意 initialValues 不能被 setState 動(dòng)態(tài)更新，你需要用 setFieldsValue 來更新志于。
你不應(yīng)該用 setState涮因，可以使用 form.setFieldsValue 來動(dòng)態(tài)改變表單值。
以上為官方文檔描述伺绽，簡(jiǎn)單的 name养泡、valuePropName 綁定子控件進(jìn)行 form value設(shè)置。
有時(shí)候我們可能想要自定義進(jìn)行值的轉(zhuǎn)換憔恳。
需要用到
shouldUpdate
Form 通過增量更新方式瓤荔，只更新被修改的字段相關(guān)組件以達(dá)到性能優(yōu)化目的。大部分場(chǎng)景下钥组，你只需要編寫代碼或者與 dependencies 屬性配合校驗(yàn)即可输硝。而在某些特定場(chǎng)景，例如修改某個(gè)字段值后出現(xiàn)新的字段選項(xiàng)程梦、或者純粹希望表單任意變化都對(duì)某一個(gè)區(qū)域進(jìn)行渲染点把。你可以通過 shouldUpdate 修改 Form.Item 的更新邏輯。
當(dāng) shouldUpdate 為 true 時(shí)屿附，F(xiàn)orm 的任意變化都會(huì)使該 Form.Item 重新渲染郎逃。這對(duì)于自定義渲染一些區(qū)域十分有幫助：
<Form.Item shouldUpdate>
{() => {
return <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>;
}}
</Form.Item>
你可以參考示例查看具體使用場(chǎng)景。
當(dāng) shouldUpdate 為方法時(shí)挺份，表單的每次數(shù)值更新都會(huì)調(diào)用該方法褒翰，提供原先的值與當(dāng)前的值以供你比較是否需要更新。這對(duì)于是否根據(jù)值來渲染額外字段十分有幫助：
<Form.Item shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}>
{() => {
return (
<Form.Item name="other">
<Input />
</Form.Item>
);
}}
</Form.Item>
你可以參考示例查看具體使用場(chǎng)景优训。
form 是哪里來的
通過fc渲染來獲取進(jìn)行shouldUpdate刷新渲染實(shí)現(xiàn)外部隔離
import { ProFormItem } from '@ant-design/pro-components';
import { Switch } from 'antd';
export type ProFormSwitchWzcPropType<T, F> = {
valueEnum: {
true: {
label: string;
value: T;
};
false: {
label: string;
value: T;
};
};
/**
* form item name
*/
name: string;
label: string;
};
const ProFormSwitchWzc = <T, F>(prop: ProFormSwitchWzcPropType<T, F>) => {
return (
<ProFormItem label={prop.label} shouldUpdate>
{(form) => {
return (
<Switch
checkedChildren={prop.valueEnum.true.label}
unCheckedChildren={prop.valueEnum.false.label}
checked={
form.getFieldValue(prop.name) === prop.valueEnum.true.value
}
onChange={(ck) =>
form?.setFieldValue(
prop.name,
prop.valueEnum[ck ? 'true' : 'false'].value,
)
}
></Switch>
);
}}
</ProFormItem>
);
};
export default ProFormSwitchWzc;
使用
<ProForm<AccountEditReq>
onFinish={handleFinish}
formRef={formRef}
params={routerParams}
formKey="accountItem"
dateFormatter={(value, valueType) => {
console.log('---->', value, valueType);
return value.format('YYYY/MM/DD HH:mm');
}}
request={handlePageInit}
autoFocusFirstInput
>
<ProFormSwitch
name="adminFlag"
label="超級(jí)管理員"
checkedChildren="是"
unCheckedChildren="否"
/>
<ProFormSwitchWzcPropType<number, AccountEditReq>
valueEnum={{
true: {
label: '正常',
value: 0,
},
false: {
label: '鎖定',
value: 1,
},
}}
name="lockFlag"
label="鎖定賬戶"
></ProFormSwitchWzcPropType>
</ProForm>
