我正在使用一个包react-phone-number-input 我有 2 个文件: 索引.tsx, useLogicRegister.ts
我提供了部分代码,其中出现错误 类型“字符串”不可分配给类型“E164Number”
我也尝试将字符串解析为phoneNumber,但仍然不起作用。
const parsedPhone = parsePhoneNumber(phone) || '';
index.tsx 文件具有phoneInput 的UI,useLogicRegister.ts 文件具有props、hooks 和接口 handlePhoneChange 方法。
这是index.tsx的UI代码部分
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useLogicRegister } from './useLogicRegister';
import 'react-phone-number-input/style.css';
import PhoneInput from 'react-phone-number-input';
const Register: React.FC = () => {
const navigate = useNavigate();
const {
firstname,
lastname,
email,
password,
phone
} = useLogicRegister(navigate);
}
return (
<PhoneInput
rules={{ required: true }}
placeholder="Enter phone number"
value={phone}
defaultCountry="US"
className="form-control"
onChange={handlePhoneChange}
/>
);
};
export default Register;
这里是useLogicRegister.ts
import { useState } from 'react';
import { NavigateFunction } from 'react-router-dom';
import { login } from '../../../store/authSlice';
import { useDispatch } from 'react-redux';
interface useLogicRegisterProps {
email: string;
phone: string;
password: string;
firstname: string;
lastname: string;
handlePhoneChange: (value: string | undefined) => void;
}
export const useLogicRegister = (navigate: NavigateFunction ): useLogicRegisterProps => {
const dispatch = useDispatch();
const [email, setEmail] = useState('');
const [phone , setPhone] = useState('');
const [password, setPassword] = useState('');
const [firstname, setFirstname] = useState('');
const [lastname, setLastname] = useState('');
const handlePhoneChange = (value: string | undefined) => {
if (value) {
setPhone(value);
}
};
return {
email,
phone,
password,
firstname,
lastname
};
};
您可以从库中导入
E164Number
类型别名。只需将导入更新为 import PhoneInput, { type Value } from 'react-phone-number-input'
。并在界面中使用这个类型
interface useLogicRegisterProps {
email: string;
phone: Value;
password: string;
firstname: string;
lastname: string;
handlePhoneChange: (value: Value | undefined) => void;
}