在反应本机应用程序上使用反应钩子形式答案

【问题标题】：using react hook form on react native app在反应本机应用程序上使用反应钩子形式
【发布时间】：2021-02-05 08:10:12
【问题描述】：

我正在尝试创建接收 '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>
  );
};

这个例子不起作用 - 输入/数据不会从 Controller 组件传递到 MyScreen 屏幕（从子到父）。有什么想法可以让它发挥作用吗？

额外截图：

MainScreen

MyControllerComponet

final result

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

感谢您的帮助

【问题讨论】：

标签： react-native react-hook-form react-ref react-forms

【解决方案1】：

在父组件中

const from = useForm({})

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

const {handleSubmit} = form;

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

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

然后在MyControllerComponent里面

const { control, errors} =props.form;

【讨论】：

我不想在 MyControllerComponent 上处理提交，我想在父组件中有一个按钮，并在单击提交时调用 handleSubmit 函数。
是的，我的错。我会删除它。在这种情况下，在父组件中只需执行const {handleSubmit} = form; 或直接用作form.handleSubmit。
你能写得更有条理吗？你的意思是在父组件中做const {handleSubmit} = form而不是const {handleSubmit, control, errors, register, setValue, form} = useForm();？
我的意思是您可以将表单实例保留在父组件中，并将其作为道具传递给子 MyController 组件。从那里您可以提取 control, errors 等值，在父组件中您可以处理 handleSubmit