React js - 在react-phone-input-2中如何使国家/地区代码可编辑为假并显示占位符

Question

所以我需要在国家代码之后显示占位符，并且代码将不可编辑，但它不显示，我正在使用反应功能组件。

这是我下面的代码

<PhoneInput
             className="inputTextDirLeft"
             country={'us'}
             type="text"
             inputStyle={{width: '100%'}}
             countryCodeEditable={false}
             onlyCountries={formFieldData.formFlowData.countryCodes.map(function (x) {
                return x.toLowerCase()
              })}
              placeholder="5xxxxxxxx"
              onChange={(phone, data) => {
               setValue('country_code', data.countryCode.toUpperCase())
               setNumberVal(phone)
              }}
/>

感谢您的回答。

Answer 1

要使国家/地区代码不可编辑，同时在

react-phone-input-2

中显示占位符，您基本上已经做对了。但是，请确保您的

countryCodeEditable

属性设置为

false

，就像您所做的那样。显示在国家/地区代码后面且不可编辑的占位符应与

placeholder

属性一起使用，因为您已将其设置为 5xxxxxxx。如果占位符未按预期显示，请仔细检查

inputStyle

和其他可能会覆盖占位符可见性的 CSS。另外，请确保您使用的

react-phone-input-2

版本按预期支持这些功能。