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

发布于 2025-01-16 04:12:57 字数 765 浏览 0 评论 0原文

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

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

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

谢谢！

原文

Is there a way to render an icon or empty selector if a pre-existing value exists in React-Phone-Input-2?

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

Right now the first country flag si render in the selector:

And I want something like this if the value exists and no country code is selected:

Thank you!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北城半夏 2025-01-23 04:12:57

新
当我们使用默认值时，焦点类消失，因此它不显示值。我添加它是为了添加 focused 类。

  useEffect(() => {
    document.querySelector('.phone-number-field')?.classList.add('focused');
  }, []);

旧：
对我来说，这有效 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) }
/>

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

New
When we a default value, focused class disappeared therefore it don't show value. I added this to add focused class.

  useEffect(() => {
    document.querySelector('.phone-number-field')?.classList.add('focused');
  }, []);

Old:
For me this worked autoFocus:true and onFocus event worked

<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) }
/>

The issue is, it focus and show curor

回复收藏 0 原文

~没有更多了~