【Ant.design pro】 formRef 用法
文章目录
- 一、导入与定义
- 二、使用方法
一、导入与定义
import React, {useRef} from "react";const formRef = useRef<ProFormInstance>();
在form表单内定义 formRef={formRef}
<StepsFormactionRef={Ref}formRef={formRef}onFinish={async (params) =>{console.log(params)}}>。。。
</StepsForm>
二、使用方法
1.
获取方法:
const pay_amount =formRef?.current?.getFieldValue
(“pay_amount”)
2.添加方法:
formRef?.current?.setFieldsValue
({recevited_amount
:pay_amount-(no_pay_amount?no_pay_amount:0)})
这样可以给recevited_amountProFormMoney
输入框添加联动值
<ProFormMoney label={"缴款金额"} name={"pay_amount"} />
<ProFormMoney label={"欠款"} name={"no_pay_amount"} />
<ProFormDependency name={['no_pay_amount']}>{({ no_pay_amount }) => {const pay_amount = formRef?.current?.getFieldValue("pay_amount")formRef?.current?.setFieldsValue({recevited_amount:pay_amount--(no_pay_amount?no_pay_amount:0)})}}
</ProFormDependency>
<ProFormMoney label={"实际到账金额"} name={"recevited_amount"} disabled extra={(<a style={{color:"red"}}>实际到账金额=缴款金额-返款-欠款</a>)}/>