如何在Typescript中使用react-phone-input-2

Question

我是Typescript新手，但我强迫自己用它编程，因为他们说它是"最好的";实践和长期有益的……

所以现在我尝试使用react-phone-input-2

https://www.npmjs.com/package/react-phone-input-2

上面的例子只是标准的Javascript。我确实照做了……小部件确实显示出来了……然而，我不能在输入中输入任何东西…在我的编辑器中，PhoneInput标签的onChange属性/prop在它下面有一条红色的弯弯曲曲的线。当我将鼠标悬停在上面时，它显示以下错误:

(方法)PhoneInputEventsProps.onChange吗?(value: string, data: {} |CountryData, event: React。ChangeEvent,formattedValue: string): void类型'Dispatch'不能分配给type'(value: string, data: {} | CountryData, event:ChangeEvent, formattedValue: string) =>无效"。
参数'value'和'value'的类型不兼容。类型'string'不能赋值给类型'SetStateAction'.ts(2322) index.d。ts(26,5):期望值type来自属性'onChange'，它在type上声明"IntrinsicAttributes,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提供类型或默认值。这意味着默认值是undefined，这是该状态下允许的唯一类型。

这意味着这里的setValue类型(或多或少)是:

(newValue: undefined) => void

onChangeprop的类型为:

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

所以onChange的第一个参数将是string，但是你的setValue函数只接受undefined。

---

要解决这个问题，您只需给您的状态一个类型。显式地:

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

或者让类型从默认值推断出来:

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

看到操场

Answer 2

错误说明您有不兼容的类型。通常，useState()返回的第二个参数类型为Dispatch<SetStateAction>。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'
/>