如何制作Form Element的控制器组件

Question

在react native中，我想制作一个动态控制器组件。但是我不能用它访问错误；反钩形式"；用于表单元素。所以这是我的组件：

const {
control,
handleSubmit,
formState: {errors},
setValue,
} = useForm();
const DynamicController = ({req, pattern, name, label}) => {
return (
<>
<Text style={[t.textBase]}>{label}</Text>
<Controller
control={control}
defaultValue=""
rules={{
required: {
value: true,
message: 'Bu alan boş bırakılamaz!',
},
}}
render={({field: {onChange, onBlur, value}}) => (
<Input
errorText={errors[name].message}
error={errors[name]}
onBlur={onBlur}
placeholder={label}
onChangeText={onChange}
value={value}
/>
)}
name={name}
/>
</>
);
};

我的输入组件基本上是简单的输入。我的问题是，当我给出错误名称时，我无法访问错误。

这就是我如何使用我的组件：

<DynamicController
label="Email"
name="Email"
pattern={true}
req={true}
/>

当我没有填写元素并记录提交时，它不会显示任何错误。它的简单传递验证。那么，我该怎么办呢？我做错了什么？谢谢你的回答！！！

Answer 1

您的Input是自定义包装器吗？如果没有，使用反作用钩子形式的更好方法是：

const {
control,
handleSubmit,
formState: {errors},
setValue,
} = useForm(
defaultValues: {
firstName: '', // form fields should be populated here so that the error can be displayed appropriately 
lastName: ''
}
);
const DynamicController = ({req, pattern, name, label}) => {
return (
<>
<Text style={[t.textBase]}>{label}</Text>
<Controller
control={control}
defaultValue=""
rules={{
required: {
value: true,
message: 'Bu alan boş bırakılamaz!',
},
}}
render={({field: {onChange, onBlur, value}}) => (
<Input
onBlur={onBlur}
placeholder={label}
onChangeText={onChange}
value={value}
/>
)}
name={name}
/>
{errors[name] && <Text>This is required.</Text>}
</>
);
};