如果 React-Phone-Input-2 中存在预先存在的值，如何渲染图标或空选择器？

Question

如果React-Phone-Input-2中存在预先存在的值，有没有办法渲染图标或空选择器？

<PhoneNumberInputField
   countryCodeEditable={ false }
   country={ defaultCountry() }
   value={ value }
   specialLabel={ translate('profile:profile.phone') }
   onChange={ (phoneNumber, data) => handlePhoneChange(phoneNumber, data) }
/>

现在第一个国家的国旗在选择器中呈现：

如果该值存在并且未选择国家/地区代码，我想要这样的内容：

谢谢！

Answer 1

对我来说这有效

autoFocus:true

并且

onFocus

活动有效

<PhoneNumberInputField
   countryCodeEditable={ false }
   country={ defaultCountry() }
   inputProps={{
        ... // otherprops
        autoFocus: value ? true : false,
      }}
   onFocus={() => {
        document.querySelector('.phone-number-field')?.classList.add('focused');
      }}
   specialLabel={ translate('profile:profile.phone') }
   onChange={ (phoneNumber, data) => handlePhoneChange(phoneNumber, data) }
/>

问题是，它聚焦并显示光标