输入框无法onChange两种解决思路

如果输入框用 onChange 去同步value的话很明显会碰到例如频闪、立即格式化等问题，那么如何解决呢

一种是通过防抖或者节流，设个debance然后通过ref去处理

还有一种是只在失焦的时候再去处理

onBlur={(e) => handleRateChange(e.target.value)} // 只在失焦的时候处理 ，因为用户后面去填写核销金额肯定会导致失焦

import {BeForm,BeFormItem,BeInput,BeMButton,BeMDatePicker,BePureFormItem,BeSelect,bv,useForm,
} from '@finfe/beetle-ui';
import { Money, MoneyRead } from '@react/components';
import { Modal, message, notification } from '@ss/mtd-react3';
import { convertAmountWithCurrency } from '@tmc/business';
import { ImprestItem } from '@tmc/business/src/apis/reserveFund/imprestSearch';
import { submitWriteOff } from '@tmc/business/src/apis/reserveFund/submitWriteOff';
import {getCurrencySelectOptions,WriteOffTypeOptions,
} from '@tmc/business/src/constance/reserveFund';
import {formatter2Display,formatter2Value,getAccuracy,
} from '@tmc/business/src/logic/useMoney';
import dayjs from 'dayjs';
import { useEffect, useMemo, useState } from 'react';interface FinanceModalProps {visible: boolean;record: ImprestItem;onClose: () => void;onSuccess?: () => void;
}interface FormData {type: number;expenseCurrency: string;writeOffCurrency: string;writeOffDate: number | null;writeOffRate: string;writeOffAmount: number;remark: string;
}export default function FinanceModal(props: FinanceModalProps) {const { visible, record, onClose, onSuccess } = props;// 允许核销金额const [allowAmount, setAllowAmount] = useState<number>(0);const [rateLoading, setRateLoading] = useState(false);// 使用 BeForm 管理表单状态const form = useForm<FormData>({onSubmit: async (values) => {await handleSubmit(values);},});// 监听表单值变化const formValues = form.watch();// 初始化表单useEffect(() => {if (visible && record) {form.setValues({type: 2,expenseCurrency: record.expenseCurrency,writeOffCurrency: record.expenseCurrency,writeOffDate: null,writeOffRate: '',writeOffAmount: NaN,remark: '',});setAllowAmount(0); // 不能设置为null}}, [visible, record]);const getAmountOrRate = (customExchangeRate?: string) => {// console.log('更改', customExchangeRate);const { writeOffCurrency, writeOffDate } = formValues;if (!record || !writeOffCurrency || !writeOffDate) {return;}const calculateRate = async () => {try {setRateLoading(true);const res = await convertAmountWithCurrency([// API内部没有进行catch{amount: record.restWriteOffAmount,fromCurrency: record.expenseCurrency,toCurrency: writeOffCurrency,customExchangeRate: customExchangeRate, // formValues.writeOffRate,lineNo: 'only_one_line',},]);if (res.data && res.data.length > 0) {const result = res.data[0];setAllowAmount(result.convertAmount);if (!customExchangeRate)form.setValue('writeOffRate', result.customExchangeRate);}} catch (error: any) {notification.error({message: error.message || '汇率计算失败',});} finally {setRateLoading(false);}};calculateRate();};// 币种或日期变化时拿到后端配置的默认汇率useEffect(() => {getAmountOrRate();}, [formValues.writeOffCurrency, formValues.writeOffDate, record]);// 当汇率更改时那就是用户进行的输入，目的就是请求得到更新的可核销金额// useEffect(() => {//   getAmountOrRate(formValues.writeOffRate);// }, [formValues.writeOffRate, record]);// 选择通过失教的时候去主动调用const handleRateChange = (value: string) => {getAmountOrRate(value);};// 提交表单const handleSubmit = async (values: FormData) => {// 组装提交数据const submitData = {type: values.type,writeOffDate: values.writeOffDate!,writeOffAmount: values.writeOffAmount,remark: values.remark,expenseCurrency: record.expenseCurrency,writeOffCurrency: values.writeOffCurrency,writeOffRate: values.writeOffRate,relatedImprestExpenseBaseId: record.expenseBaseId,writeOffStaffId: record.proposerStaffId,writeOffStaffSign: record.proposerStaffSign,writeOffStaffName: record.proposerStaffName,writeOffEntityId: record.sqtInvoiceId,entInvoiceCode: record.entInvoiceCode,entInvoiceTitle: record.entInvoiceTitle,loanCurrency: record.expenseCurrency,precision: record.precision,};await submitWriteOff([submitData]);Modal.success({title: '成功',message: `成功核销 ${formValues.writeOffCurrency} ${formatter2Display(formValues.writeOffAmount)}`,});onClose();onSuccess?.();};const proposer = [record.proposerStaffName, record.proposerStaffSign].filter(Boolean);return (<ModalclassName="finance-process-modal"onClose={onClose}open={visible}style={{ width: '600px' }}title="财务处理"><Modal.Body><BeForm form={form}><BeForm.Grid><BeFormItem fieldName="type" label="核销方式"><BeSelect options={WriteOffTypeOptions} /></BeFormItem><BeFormItem fieldName="expenseCurrency" label="借款币种"><BeInput disabled /></BeFormItem><BeFormItembrules={bv.required('请选择还款币种')}fieldName="writeOffCurrency"label="还款币种"><BeSelectoptions={getCurrencySelectOptions()}placeholder="请选择还款币种"/></BeFormItem><BeFormItembrules={bv.required('请选择还款日期')}fieldName="writeOffDate"label="还款日期"><BeMDatePickerclearable={false}disabledDate={(timestamp: number) => {// 禁用大于当前日期的日子return dayjs(timestamp).isAfter(dayjs(), 'day');}}placeholder="选择时间"/></BeFormItem><BeFormItembrules={bv.required('请输入汇率').custom((value: string) => {if (value === '0') return '汇率不能为0';})}fieldName="writeOffRate"label="汇率"><BeInputdisabled={rateLoading ||!formValues.writeOffDate ||formValues.writeOffCurrency === record.expenseCurrency}// onChange={handleRateChange} // 不能用onChange这样就只能输一个字了onBlur={(e) => handleRateChange(e.target.value)} // 只在失焦的时候处理 ，因为肯定需要失焦去填写核销金额placeholder="请先选择还款日期"value={formValues.writeOffCurrency !== record.expenseCurrency? formValues.writeOffRate: '1 （当币种一致时汇率不可变）'}/></BeFormItem><BePureFormItem label="允许核销金额">{allowAmount !== null ? (<MoneyReadcurrency={formValues.writeOffCurrency}value={allowAmount}/>) : (<div>系统自动计算</div>)}</BePureFormItem><BeFormItembrules={bv.required('请输入核销金额').custom((value) => {console.log(value, allowAmount);if (!/^\\d+(\\.\\d+)?$/.test(value)) {return '核销金额只能为数字';}if (value > allowAmount) {// 注意若需要判断是否有可报销额度不能直接!，得!==null保持对0的控制// Money拿到的已经是辅币值了return `可核销金额不能超过 ${formValues.writeOffCurrency} ${formatter2Display(allowAmount)}`;// 不能return jsx 否则就用money了}})}fieldName="writeOffAmount"label="本次核销金额"><Moneycurrency={formValues.writeOffCurrency}currencyDisableddisabled={!formValues.writeOffDate}placeholder="填写本次核销金额"value={formValues.writeOffAmount}/></BeFormItem><BePureFormItem label="还款主体">{/* <div style={{ lineHeight: '32px' }}> */}<div className="leading-8">{record?.entInvoiceTitle || '-'}</div></BePureFormItem><BePureFormItem label="偿还人"><div className="leading-8">{/* <div style={{ lineHeight: '32px' }}> */}{proposer.length ? proposer.join('/') : '-'}</div></BePureFormItem><BeFormItem fieldName="remark" label="备注"><BeInputmaxLength={200}// placeholder="备注"/></BeFormItem></BeForm.Grid></BeForm></Modal.Body><Modal.Footer><BeMButtonclassName="mr-3"onClick={onClose}// style={{ marginRight: '12px' }}>取消</BeMButton><BeMButton onClick={() => form.submit()} type="primary">确定</BeMButton></Modal.Footer></Modal>);
}