在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屏幕（从子级到父级）。 有什么想法可以使它起作用吗？

其他屏幕截图：

MainScreen

MyControllerComponet

final result

如您所见，单击“提交”时，只有1,2个值（主屏幕中的第一个和第二个控制器）记录到控制台，但第三个值没有。

感谢您的帮助

解决方法

在父组件中

const from = useForm({})

然后您可以从表单中提取其他值，

const {handleSubmit} = form;

您可以将表单作为道具传递给MyControllerComponet。

<MyControllerComponet name ="name" form={form} />

然后在MyControllerComponent

内

const { control,errors} =props.form;