如何使用tyspript使用React-Input-2

Question

我是打字稿的新手，但我正在强迫自己编程，因为他们说这是“最好的”练习，从长远来看...

所以现在我试图使用React-Input-Input-2

https://wwwww.npmjs.com/package/package/react-phone-phone-phone-input-nput-2 < /a>

上面页面上的示例仅适用于标准JavaScript。 我确实遵循了它...小部件确实显示了...但是我无法在输入中输入任何内容... 在我的编辑器中，onChange属性/Prop of Phone Intup标签的下面有一条红色的线条。 当我徘徊时，它显示以下错误：

（方法） CountryData，活动：React.ChangeEvent， formattedValue：string）：void类型 'dispatch＆lt; setStateaction＆gt;'不能分配给类型 '（值：字符串，数据：{} | countrydata，事件： ChangeEvent，formattedValue：string）=＆gt; void'。
参数的类型“值”和“值”是不兼容的。 类型“字符串”不可分配给'setTateAction'.ts（2322）index.d.ts（26，5）：预期 类型来自属性“ on Change”，在此处声明 'intinsInsICATTRIBUTES＆amp; PhoneInputProps'

我基本上将其放在顶部：

const [value, setValue] = useState()

然后在返回的JSX中的某个地方：

<PhoneInput
                                    placeholder='Enter phone number'
                                    value={value}
                                    onChange={setValue}
                                    className='block max-w-lg w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md'
                                />

如何调整代码，以便react-phone-Input-2适用于Typescript？

Answer 1

问题是您不给usestate提供类型或默认值。这意味着默认值是未定义的，这是该状态唯一允许的类型。

这意味着类型setValue这里是（或多或少）：

(newValue: undefined) => void

onChange prop的类型是：

(
  value: string,
  data: {} | CountryData,
  event: React.ChangeEvent<HTMLInputElement>, formattedValue: string
) => void

因此，第一个参数onChange将是字符串，但是您的setValue函数仅接受undefined。

---

要修复它，您只需要给您的州一种类型即可。 Either explicitly:

const [value, setValue] = useState<string | undefined>()

Or by letting the type be inferred from the default value:

const [value, setValue] = useState('') // type inferred from default value

请参阅操场

Answer 2

错误指出您的类型不兼容。通常，来自usestate（）返回的第二个参数是类型dispatch＆setStateAction＆gt;。 onChange参数需要其他内容。这种最小的变化应该有效：

<PhoneInput
  placeholder='Enter phone number'
  value={value}
  onChange={(newValue) => setValue(newValue)}
  className='block max-w-lg w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md'
/>

Answer 3

const [phoneNumber, setPhoneNumber] = useState<string>('');

const handlerPhoneNumber = (
    value: string,
    data: CountryData,
    event: ChangeEvent<HTMLInputElement>,
    formattedValue: string
    ) => {
        setPhoneNumber(value);
    };


<PhoneInput
    enableAreaCodeStretch
    country="br"                            
    inputProps={{
      name: 'phoneNumber',
    }}
    autoFormat
    regions={['south-america']}
    onlyCountries={['br', 'cl', 'uy', 'co']}
    areaCodes={{
      cl: ['56'],
      uy: ['598'],
      co: ['57'],
      br: ['55'],
    }}
    masks={{
      cl: '.. . ....-....',
      uy: '.. ....-....',
      co: '. ....-....',
      br: '(..) .....-....',
    }}
    specialLabel=""
    value={phoneNumber}
    onChange={handlerPhoneNumber}
    placeholder="Número de telefone"
/>