Reactjs React电话输入2与React挂钩形式

我正在使用PhoneInput和react hook表单，我只想在电话号码有效时启用save按钮

代码：

    <form onSubmit={handleSubmit(onSubmitRequest)}>
      .....................other code..............
       <Controller
        as={
          <PhoneInput
            id="pNum"
            placeholder="Enter phone number"
            className={classes.phoneInput}
            inputRef={register({required: true})}
            isValid={(inputNumber, onlyCountries) => {
              return onlyCountries.some((country) => {
                return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
              });
            }}
          />
        }
        name="phoneNumber"
        control={control}
      />
     ........................other code...................
     <Button
        fullWidth
        type="submit"
        variant="contained"
        color={'primary'}
        className={classes.submitBtn}
        data-testid="customerFormButton"
        disabled={!formState.isValid}
      >
        Save
      </Button>
  </form>

其他代码。。。。。。。。。。。。。。
{
返回startsWith（inputNumber，country.dialCode）| | startsWith（country.dialCode，inputNumber）；
});
}}
/>
}
name=“phoneNumber”
control={control}
/>
其他代码。。。。。。。。。。。。。。。。。。。
拯救

---

在这里，我使用

PhoneInput

作为控制器，同时使用

isValid

作为控制器。如何禁用无效电话号码输入的保存按钮？

你好吗？我相信您的问题是因为您没有为控制器配置规则

您需要将控制器更改为以下内容：

<Controller
        as={
          <PhoneInput
            id="pNum"
            placeholder="Enter phone number"
            className={classes.phoneInput}
            inputRef={register}
            isValid={(inputNumber, onlyCountries) => {
              return onlyCountries.some((country) => {
                return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
              });
            }}
          />
        }
        name="phoneNumber"
        control={control}
        rules= {{required: true}}
      />

{
返回startsWith（inputNumber，country.dialCode）| | startsWith（country.dialCode，inputNumber）；
});
}}
/>
}
name=“phoneNumber”
control={control}
规则={required:true}
/>

你好吗？我相信您的问题是因为您没有为控制器配置规则

您需要将控制器更改为以下内容：

<Controller
        as={
          <PhoneInput
            id="pNum"
            placeholder="Enter phone number"
            className={classes.phoneInput}
            inputRef={register}
            isValid={(inputNumber, onlyCountries) => {
              return onlyCountries.some((country) => {
                return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
              });
            }}
          />
        }
        name="phoneNumber"
        control={control}
        rules= {{required: true}}
      />

{
返回startsWith（inputNumber，country.dialCode）| | startsWith（country.dialCode，inputNumber）；
});
}}
/>
}
name=“phoneNumber”
control={control}
规则={required:true}
/>

ref当前无法在此元素上使用。react-phone-input-2

在支持之前，您可以提供一个隐藏的输入字段，当手机更新其值时，该字段会更新其值，并将ref置于该字段上 例如：

import React，{FC，useCallback}来自“React”；
从“react hook form”导入{useFormContext}；
从“react-phone-input-2”导入PhoneInput；
导入'react-phone-input-2/lib/style.css'；
界面道具{
handleChange:（名称：string，val:string）=>void；
默认值：字符串；
名称：字符串；
}
const MyComponent:FC=（{defaultValue，name，handleChange}）=>{
const{register，setValue，watch}=useFormContext（）；//注意：需要在父级中才能访问此项
const namehinded=`${name}Hidden`；
const handleChangePhone=useCallback(
（val:string）=>{
setValue（nameHidden，val，{shouldValidate:true}）；
handleChange（名称，val）；
},
[手机更换]
);
返回(
);
};
导出默认MyComponent；

ref当前无法在此元素上使用。react-phone-input-2

在支持之前，您可以提供一个隐藏的输入字段，当手机更新其值时，该字段会更新其值，并将ref置于该字段上 例如：

import React，{FC，useCallback}来自“React”；
从“react hook form”导入{useFormContext}；
从“react-phone-input-2”导入PhoneInput；
导入'react-phone-input-2/lib/style.css'；
界面道具{
handleChange:（名称：string，val:string）=>void；
默认值：字符串；
名称：字符串；
}
const MyComponent:FC=（{defaultValue，name，handleChange}）=>{
const{register，setValue，watch}=useFormContext（）；//注意：需要在父级中才能访问此项
const namehinded=`${name}Hidden`；
const handleChangePhone=useCallback(
（val:string）=>{
setValue（nameHidden，val，{shouldValidate:true}）；
handleChange（名称，val）；
},
[手机更换]
);
返回(
);
};
导出默认MyComponent；

属性“inputRef”在类型-PhoneInput-来自react-phone-input-2上不存在属性“inputRef”在类型-PhoneInput-来自react-phone-input-2上不存在