我是 Typescript 的新手，但我強迫自己在其中編程，因為他們說這是“最佳”實踐，從長遠來看是有益的......
所以現在我正在嘗試使用 react-phone-input-2
https://www.npmjs.com/package/react-phone-input-2
上面頁面上的示例僅適用于標準 Javascript。我確實遵循了它...小部件確實顯示了...但是我無法在輸入中鍵入任何內容...在我的編輯器onChange中，PhoneInput 標記的屬性/道具在其下方有一條紅色的波浪線。當我將滑鼠懸停在它上面時，會顯示以下錯誤：
(方法) PhoneInputEventsProps.onChange?(value: string, data: {} | CountryData, event: React.ChangeEvent, formattedValue: string): void Type 'Dispatch<SetStateAction>' 不可分配給型別 '(value: string, data : {} | CountryData, 事件: ChangeEvent, formattedValue: string) => void'。
引數 'value' 和 'value' 的型別不兼容。型別“字串”不可分配給型別“SetStateAction”.ts(2322) index.d.ts(26, 5)：預期型別來自屬性“onChange”，該屬性在“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 ？？？？
uj5u.com熱心網友回復：
問題是您沒有為useState. 這意味著默認值 isundefined并且這是該狀態允許的唯一型別。
這意味著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
看游樂場
uj5u.com熱心網友回復：
該錯誤表明您有不兼容的型別。通常，useState()回傳的第二個引數是 type 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'
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/475753.html
標籤：javascript 反应 打字稿 反应电话号码输入 反应电话输入 2