有没有办法将道具传递给反应电话号码输入库中的文本字段？

Question

我正在使用 React-phone-number-input 库来获取具有国家/地区代码的用户的电话号码输入。我添加了额外的文本字段作为该组件的 inputComponent 属性。我的组件是，

<PhoneInput
   international
   defaultCountry="BD"
   placeholder="Enter phone number"
   value={phoneNumber}
   onChange={handlePhoneNumberOnChange}
   countryCallingCodeEditable={false}
   inputComponent={TextFieldPhoneInput}
/>

有没有办法将其他一些道具传递给我在 inputComponent 中使用的 TextFieldPhoneInput 组件？将道具传递给 TextFieldPhoneInput 的原因是，我想验证文本字段并在验证后将一些错误消息显示为标签。

Answer 1

你可以这样做

<PhoneInput
  placeholder="Enter phone number"
  value={value}
  onChange={setValue}
  inputComponent={forwardRef((props, ref) => <input ref={ref} {...props} id=my_input_id_extra_passing_it" />)}
/>

假设您知道如何以及在何处导入forwardRef