我尝试使用React Hook Form创建一个通用的自定义FormInput组件,但我在处理类型时遇到了困难
我会将我的组件称为...
<FormInput control={control} name={"name"}></FormInput>
...并保留名称属性的自动完成功能。
我的FormInput看起来像
type Props = {
control: any
name: any
rules?: any
shouldUnregister?: boolean
style?: StyleProp<TextStyle>
secureTextEntry?: boolean
placeholder?: string
}
const FormInput = ({
name,
control,
rules,
style,
secureTextEntry,
placeholder,
}: Props) => {
return (
<Controller
name={name}
control={control}
rules={rules}
render={({
field: { onChange, onBlur, value },
fieldState: { error },
}) => (
<>
<Input
onBlur={onBlur}
onChangeText={onChange}
value={value}
style={style}
secureTextEntry={secureTextEntry}
placeholder={placeholder}
/>
{error && <Text>{error.message || "Error"}</Text>}
</>
)}
></Controller>
)
}
export default FormInput
并且我不知道{control,name,rules}应该是什么类型。
我试过了
type Props<T> = {
control: Control<T, any>
name: Path<T>
rules?: {For this I have no Idea}
[...]
}
const FormInput = <T,>({
[...]
}: Props<T>) => {
[...]
//Call with
<FormInput<Program> control={control} name={"name"}></FormInput>
我在{control}上遇到此错误:
类型“T”不满足约束“FieldValues.”此类型参数可能需要extends FieldValues
约束.
但即使使用extends,它也不起作用。
提前感谢您的帮助!
1条答案
按热度按时间vvppvyoh1#
你的组件道具应该是这样的
组件应该如下所示