如何为表单元素制作控制器组件答案

【问题标题】：How can i make controller component for Form Element如何为表单元素制作控制器组件
【发布时间】：2022-01-13 21:16:37
【问题描述】：

在本机反应中，我想制作一个动态控制器组件。但我不能用它访问错误。我对表单元素使用“react-hook-form”。所以它是我的组件：

 const {
    control,
    handleSubmit,
    formState: {errors},
    setValue,
  } = useForm();
    const DynamicController = ({req, pattern, name, label}) => {
        return (
          <>
            <Text style={[t.textBase]}>{label}</Text>
            <Controller
              control={control}
              defaultValue=""
              rules={{
                required: {
                  value: true,
                  message: 'Bu alan boş bırakılamaz!',
                },
              }}
              render={({field: {onChange, onBlur, value}}) => (
                <Input
                  errorText={errors[name].message}
                  error={errors[name]}
                  onBlur={onBlur}
                  placeholder={label}
                  onChangeText={onChange}
                  value={value}
                />
              )}
              name={name}
            />
          </>
        );
      };

我的输入组件基本上是简单的输入。我的问题是当我给出像该示例这样的错误名称时，我无法访问错误。

这是我使用组件的方式：

<DynamicController
              label="Email"
              name="Email"
              pattern={true}
              req={true}
            />

当我不填充元素并记录提交时，它不会显示任何错误。其简单的通过验证。那么我该怎么做我哪里做错了？谢谢解答！！！

【问题讨论】：

标签： javascript android reactjs react-native

【解决方案1】：

您的 Input 是自定义包装器吗？如果没有，使用 react-hook-form 的更好方法是：

const {
    control,
    handleSubmit,
    formState: {errors},
    setValue,
  } = useForm(
  defaultValues: {
      firstName: '', // form fields should be populated here so that the error can be displayed appropriately 
      lastName: ''
    }
);
    const DynamicController = ({req, pattern, name, label}) => {
        return (
          <>
            <Text style={[t.textBase]}>{label}</Text>
            <Controller
              control={control}
              defaultValue=""
              rules={{
                required: {
                  value: true,
                  message: 'Bu alan boş bırakılamaz!',
                },
              }}
              render={({field: {onChange, onBlur, value}}) => (
                <Input
                  onBlur={onBlur}
                  placeholder={label}
                  onChangeText={onChange}
                  value={value}
                />
              )}
              name={name}
            />
             {errors[name] && <Text>This is required.</Text>}
          </>
        );
      };

【讨论】：