React-hook-Form，将值从一个SelectBox传递到另一个SelectBox

Question

我发现这个简单的逻辑有问题。

我正在使用react-hook-form，我认为这应该很简单，但我仍在与它斗争一个多星期。

我正在使用 nextUI 组件

 <Checkbox
                className="mt-2 mb-5"
                radius="sm"
                checked={useResAddress}
                onValueChange={handleUseResAddressChange}
              >
                Use Residential Address
              </Checkbox>

此复选框为 true 时，应传递此选择框中的值

<Select
                  label="Residenntial Country"
                  placeholder="-Select Country-"
                  isRequired
                  radius="sm"
                  className="font-inter font-medium text-xl"
                  classNames={{
                    trigger: INPUT_STYLES,
                  }}
                  {...register('residenceCountry')}
                >
                  <SelectItem
                    key={'NG'}
                    value={'NG'}
                    classNames={{ title: ['font-inter'] }}
                  >
                    NG
                  </SelectItem>
                </Select>

将其传递给此，因为它们具有相同的值，所以应该可以工作。

<Select
                  label="Correspondence Country"
                  placeholder="-Select Country-"
                  isRequired
                  radius="sm"
                  className="font-inter font-medium text-xl"
                  classNames={{
                    trigger: INPUT_STYLES,
                  }}
                  {...register('correspondenceCountry')}
                >
                  <SelectItem
                    key={'NG'}
                    value={'NG'}
                    classNames={{ title: ['font-inter'] }}
                  >
                    NG
                  </SelectItem>
                </Select>

这就是执行此操作的函数

 function handleUseResAddressChange(isChecked: boolean) {
    setUseResAddress(isChecked);
    if (isChecked) {
      const residenceCountry = watch('residenceCountry');
      const residenceState = watch('residenceState');
      const residenceLocalGovernmentCode = watch(
        'residenceLocalGovernmentCode'
      );
      setValue('correspondenceCountry', residenceCountry);
      setValue('correspondenceState', residenceState);
      setValue(
        'correspondenceLocalGovernmentCode',
        residenceLocalGovernmentCode
      );
    } else {

      setValue('correspondenceCountry', '');
      setValue('correspondenceState', '');
      setValue('correspondenceLocalGovernmentCode', '');
    }
  }

问题是，它不起作用，直到我单击用户界面中的一个元素。

我面临的问题是切换 useResAdress 开关没有任何效果。该表格有两个部分，每个部分都包含在一个手风琴中。第一个输入字段位于第一个手风琴中，而第二个输入字段位于第二个手风琴中。当我切换 useResAdress 开关时，没有任何反应。但是，当我折叠并展开手风琴时，会出现值。我希望该值立即显示，而不必折叠和展开手风琴。

请大家帮忙！

Answer 1

在您的代码中，我首先注意到的是在同步函数体中调用的

watch

方法。

watch

返回一个有状态的值。我认为这个改变可能会有所帮助。

 function handleUseResAddressChange(isChecked: boolean) {
    setUseResAddress(isChecked);
    if (isChecked) {
      const [residenceCountry,residenceState,residenceLocalGovernmentCode  = 
         getValues(["residenceCountry", "residenceState", 
         "residenceLocalGovernmentCode"]);
      setValue('correspondenceCountry', residenceCountry);
      setValue('correspondenceState', residenceState);
      setValue(
        'correspondenceLocalGovernmentCode',
        residenceLocalGovernmentCode
      );
    } else {

      setValue('correspondenceCountry', '');
      setValue('correspondenceState', '');
      setValue('correspondenceLocalGovernmentCode', '');
    }
  }