react-native - 在反应本机应用程序上使用反应钩子形式

Question

我正在尝试创建接收道具的可重用控制器组件，而不是一次又一次'name'地复制粘贴具有不同道具的相同控制器标签。'name'

而不是这样写：

我的屏幕.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'},
          }}
          defaultValue=""
          render={({onChange, value}: any) => (
            <Input
              error={errors.name}
              errorText={errors?.name?.message}
              onChangeText={(text: any) => onChange(text)}
              value={value}
              placeholder="Email"
            />
          )}
        />

我想要这样的东西：

我的屏幕.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, message: 'Email is required'},
          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屏幕（从子组件到父组件）。任何想法我怎样才能让它工作？

额外截图：

主屏幕

我的控制器组件

最后结果

如您所见，单击 onSubmit 时只有 1,2 个值（MainScreen 中的第一个和第二个控制器）记录到控制台，但第 3 个值没有。

感谢您的帮助

Answer 1

在父组件中

const from = useForm({})

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

const {handleSubmit} = form;

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

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

然后在里面MyControllerComponent

const { control, errors} =props.form;