reactjs - React Hook Forms/Ionic React：根据输入值的变化自动完成输入值

Question

项目要求根据输入值的变化来满足输入值；例如：cash 和 pos 是两个字段，有一个全局价格，价格为 70，如果用户输入现金 50，则 pos 必须履行为 20，而如果用户输入 30 为 pos，则必须兑现现金40.

我们将Ionic React输入用于表单，使用React Hook Form进行验证，并使用以下代码：

<form noValidate onSubmit={handleSubmit(onSubmitPayment)}>
              <IonItem>
                <IonLabel>Nakit</IonLabel>
                <Controller
                  control={control}
                  name="cashAmount"
                  rules={{
                    required: true,
                    min: 0,
                    max: packageDetails.orderData.price,
                  }}
                  render={({ value, onChange, onBlur }) => (
                    <IonInput
                      type="number"
                      value={value}
                      onIonChange={([e]:any) => {
                        console.log("Firing onChange at Cash!")
                        setValue("posAmount", calculateFieldValue(e.detail.value!))
                        // onChange(e.detail.value!)
                      }}
                      onIonBlur={onBlur}
                      required
                    />
                  )}
                />
              </IonItem>
              {formErrorMessage(errors.cashAmount)}

              <IonItem>
                <IonLabel>Pos</IonLabel>
                <Controller
                  control={control}
                  name="posAmount"
                  rules={{
                    required: true,
                    min: 0,
                    max: packageDetails.orderData.price,
                  }}
                  render={({ value, onChange, onBlur }) => (
                    <IonInput
                      type="number"
                      value={value}
                      onIonChange={(e: any) => {
                        console.log("Firing onChange at POS!")
                        setValue("cashAmount", calculateFieldValue(e.detail.value!))
                        // onChange(e.detail.value!)
                      }}
                      onIonBlur={onBlur}
                      required
                    />
                  )}
                />
              </IonItem>
              {formErrorMessage(errors.posAmount)}

              <IonButton
                disabled={
                  isPaidPrice ||
                  packageDetails?.orderData?.status === PACKAGE_STATUS.DELIVERED
                }
                type="submit"
                color="secondary"
                className="ion-float-right"
              >
                Ödeme yap
              </IonButton>
              <IonItem lines="none" className="package-price">
                {packageDetails.orderData.currencySymbol}
                {packageDetails.orderData.price}
              </IonItem>
            </form>
          

虽然它正在工作，但有一个问题：倾斜。

onChanging输入不能像那样倾斜，它必须继续编辑而不是将其替换为一个值，因为它可以正常工作，但我不知道如何做到这一点。

有什么办法吗？

谢谢你。