英文:
I can't make MuiTelInput work with react-hook-form library
问题
我试图创建一个用于注册表单的输入字段，其中应包含电话号码。我找到了Material UI库，它支持电话号码输入。我创建了它，并尝试在React Hook Form中进行注册，以实现动态错误处理和输入处理，如下所示：
<MuiTelInput
name="phone"
className="w-full"
label="Phone number"
{...register("phone", {
required: "请输入您的电话号码！",
minLength: {
value: 10,
message: "电话号码必须至少包含10个字符",
},
maxLength: {
value: 20,
message: "电话号码不能超过20个字符",
},
})}
/>
输入字段显示出来，看起来不错，但每当我尝试输入内容时，它立即删除输入的字符。还在开发工具中抛出错误：
未捕获的Promise错误：TypeError：无法读取未定义的属性（读取'name'）
在onChange ...
此外，我希望这个表单具有一个默认的初始值，以便显示一个国旗图标（并具有更改它的能力）。如果您有任何想法，将不胜感激。
英文:
I was trying to make an input for a registration form, which should contain a phone number. I found library from material UI which supports telephone number input. I created it and tried to register it with react-hook-form for dynamic errors and input handling like this:
<MuiTelInput
name="phone"
className="w-full"
label="Phone number"
{...register("phone", {
required: "Please enter your phone number!",
minLength: {
value: 10,
message: "Phone must be made out of at least 10 characters",
},
maxLength: {
value: 20,
message: "Phone can not be longer than 20 characters",
},
})}
/>
The input shows up, and it looks good, but whenever I try to enter something it instantly deletes entered character. Also throws an error in dev-tools:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
at onChange ...
Also I want this form to have a default initial value for a country flag to show up (with ability to change it). If you can come up with any ideas that would be really appreciated.
答案1
得分: 1
MuiTelInput 组件不支持 react-hook-form 中的 register 函数。要解决这个问题，您需要使用 react-hook-form 中的 Controller 组件。
例如：
import { useForm, Controller } from 'react-hook-form';
const { control, handleSubmit } = useForm();
<Controller
name="phone"
control={control}
rules={{
required: "请输入您的电话号码！",
minLength: {
value: 10,
message: "电话号码至少需要包含10个字符",
},
maxLength: {
value: 20,
message: "电话号码不能超过20个字符",
},
}}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<MuiTelInput
label="电话号码"
value={value}
onChange={onChange}
error={!!error}
helperText={error ? error.message : null}
/>
)}
/>;
英文:
MuiTelInput component does not support the register function from react-hook-form.
To fix this problem, you need to use the Controller component from react-hook-form.
For example:
import { useForm, Controller } from 'react-hook-form';
const { control, handleSubmit } = useForm();
<Controller
name="phone"
control={control}
rules={{
required: "Please enter your phone number!",
minLength: {
value: 10,
message: "Phone must be made out of at least 10 characters",
},
maxLength: {
value: 20,
message: "Phone can not be longer than 20 characters",
},
}}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<MuiTelInput
label="Phone number"
value={value}
onChange={onChange}
error={!!error}
helperText={error ? error.message : null}
/>
)}
/>;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论