如何使用react input-2和打字记录

Question

我刚开始打字，但我强迫自己在里面编程，因为他们说这是“最好的”练习，从长远来看是有益的.

所以现在我试着用react电话输入-2

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

上面页面上的示例仅适用于标准Javascript。我确实遵循了it...the小部件显示up...however，我不能在输入中键入任何内容.在我的编辑器中，onChange属性/ PhoneInput标记的下有一条红色的线条。当我悬停在上面时，它会显示以下错误：

(方法)PhoneInputEventsProps.onChange？(值:字符串，数据：{} CountryData，事件: React.ChangeEvent，formattedValue: string)：void‘Dispatch’不可分配到类型‘(值: string，data：{}去处CountryData，event: ChangeEvent，formattedValue: string) => void’。 参数'value‘和'value’的类型是不兼容的。类型'string‘不能分配到键入’SetStateAction‘. to (2322) index.d.ts(26，5)：预期的类型来自在'IntrinsicAttributes & PhoneInputProps’类型上声明的属性'onChange‘。

我基本上把这个放在最上面：

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'
                                />

我如何调整代码，以使反应-电话输入-2将工作的打字稿？

Answer 1

问题是，您不给useState一个类型或默认值。这意味着默认值是undefined，这是唯一允许该状态的类型。

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

(newValue: undefined) => void

onChange支柱的类型是：

(
  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'
/>