在 React Native 应用程序上使用 React Hook 形式

Question

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

而不是这样写：

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'},
          }}
          defaultValue=""
          render={({onChange, 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, 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>
  );
};

此示例不起作用 - input/data 不会从 Controller 组件传递到 MyScreen 屏幕（从子组件到父组件）。有什么想法可以让它发挥作用吗？

额外截图：

MainScreen

MyControllerComponet

final result

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

感谢您的帮助

Answer 1

在父组件中

const from = useForm({})

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

const {handleSubmit} = form;

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

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

然后里面MyControllerComponent

const { control, errors} =props.form;

在 React Native 应用程序上使用 React Hook 形式

using react hook form on react native app

react-native

react-ref

react-hook-form

react-forms