Javascript 对问题的电话输入号码值作出反应

我有以下几点：（）

键入PhoneNumberInputProps={
databd:string
禁用：布尔值|未定义，
标签？：字符串，
id:字符串
有吗
值：字符串
错误？：有吗
maxLength？：数字
}
常量PhoneNumberInput:React.FC=({
数据dd，
残废
身份证件
一旦改变，
标签，
价值
错误
}) => {
const phoneInputStyle=类名({
“错误”：错误，
“隐藏”：已禁用
});
常量[updatedValue，setUpdatedValue]=useState（值）
useffect（（）=>{
setUpdatedValue（值）
}，[value]）
常量默认值\国家\值='GB'
const handleOnChange=（val:string）=>{
setUpdatedValue（val）
onChange（val）
}
返回(
{label}
)
}
导出默认PhoneNumberInput；

如果我更改了电话号码的值，ui将正确更新，value属性将在我发送给BE的号码前面获得

+

但是，如果有一个来自BE的默认值，并且我没有更改该数字，因此它不会被格式化，那么在没有+的情况下发送该值

---

无论触发的onChange是什么，是否可以格式化该值

在设置useEffect状态之前格式化该值

import PhoneInput，{formatPhoneNumber，formatPhoneNumberIntl}来自'react phone number input'
国家：{value&&formatPhoneNumber（value）}
国际：{value&&formatPhoneNumberIntl（value）}

type PhoneNumberInputProps = {
  dataBdd: string
  disabled: boolean | undefined,
  label?: string,
  id: string
  onChange: any
  value: string
  error?: any
  maxLength?: number
}

const PhoneNumberInput: React.FC<PhoneNumberInputProps> = ({
  dataBdd,
  disabled,
  id,
  onChange,
  label,
  value,
  error
}) => {

  const phoneInputStyle = classNames({
    'error': error,
    'hide': disabled
  });

  const [updatedValue, setUpdatedValue] = useState(value)

  useEffect(() => {
    setUpdatedValue(value)
  }, [value])

  const DEFAULT_COUNTRY_VALUE = 'GB'

  const handleOnChange = (val: string) => {
    setUpdatedValue(val)
    onChange(val)
  }

  return (
    <>
      <Label htmlFor={id}>{label}</Label>
      <PhoneInput
        data-bdd={dataBdd}
        disabled={disabled}
        id={id}
        defaultCountry={DEFAULT_COUNTRY_VALUE}
        value={updatedValue}
        onChange={handleOnChange}
        className={phoneInputStyle}
        maxLength={15}
      />
    </>
  )
}

export default PhoneNumberInput;