如何解决在react本机应用上使用react钩子表单
我正在尝试创建一个可重复使用的Controller组件,该组件将接收一个'name'
道具,而不是一次又一次地粘贴具有不同'name'
道具的相同Controller标签。
而不是这样写:
MyScreen.tsx
<Controller
name="name"
control={control}
rules={{
required: {value: true,message: 'Name is required'},}}
defaultValue=""
render={({onChange,value}: any) => (
<Input
error={errors.name}
errorText={errors?.name?.message}
onChangeText={(text: any) => onChange(text)}
value={value}
placeholder="Name"
/>
)}
/>
<Controller
name="email"
control={control}
rules={{
required: {value: true,message: 'Email is required'},value}: any) => (
<Input
error={errors.name}
errorText={errors?.name?.message}
onChangeText={(text: any) => onChange(text)}
value={value}
placeholder="Email"
/>
)}
/>
我想要这样的东西:
MyScreen.tsx
<MyControllerComponet name ="name"/>
<MyControllerComponet name ="email"/>
并像这样导出MyControllerComponet
:
const MyControllerComponet= (props)=>{
const {handleSubmit,control,errors} = useForm();
return (
<View>
<Controller
name={props.name}
control={control}
rules={{
required: {value: true,pattern: {
value: EMAIL_REGEX,message: 'Not a valid email',},}}
defaultValue=""
render={({onChange,value}: any) => (
<TextInput
style={[styles.inputContainer,props.error,props.style]}
{...props}
/>
)}
/>
</View>
);
};
此示例不起作用-输入/数据未从Controller组件传递到MyScreen
屏幕(从子级到父级)。
有什么想法可以使它起作用吗?
其他屏幕截图:
如您所见,单击“提交”时,只有1,2个值(主屏幕中的第一个和第二个控制器)记录到控制台,但第三个值没有。
感谢您的帮助
解决方法
在父组件中
const from = useForm({})
然后您可以从表单中提取其他值,
const {handleSubmit} = form;
您可以将表单作为道具传递给MyControllerComponet
。
<MyControllerComponet name ="name" form={form} />
然后在MyControllerComponent
const { control,errors} =props.form;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。