React Hook Forms/Ionic React：根据输入值的变化自动填充输入值

问题描述

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

我们使用 Ionic React 表单输入和 React Hook 表单 进行验证和以下代码：

<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,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 输入不能像那样倾斜，它必须继续编辑而不是将其替换为一个值，因为它正常工作，但我不知道如何做到这一点。

有什么办法吗？

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）