React-Hook-Form useFieldArray в React Native

Я пытаюсь использовать динамические поля с формой реакции-крючка в реагирующем родном. Сначала я пытался все вручную зарегистрировать, но это не сработало. Затем я попытался использовать ловушку useFieldArray, но все вновь созданные поля не регистрируются правильно. Вот мой последний подход:

У меня есть настраиваемый компонент для имитации веб-интерфейса для реагирования на собственный TextInput и пересылки ссылки.

const Input = forwardRef((props, ref) => {
  const {
    onAdd,
    ...inputProps
  } = props

  return (
    <View>
      <TextInput
       ref={ref}
       {...inputProps} />
      <Button onPress=(() => onAdd()} />
    </View>
  )
}

Затем я использую этот компонент в соответствии с тем, как документы useFieldArray отображаются в моей форме, за исключением того, что у меня есть собственный обработчик изменений. Я также явно устанавливаю ссылку и пытаюсь зарегистрировать отдельное новое поле.

const Inputs = useRef([])
const { control, register, setValue, handleSubmit, errors } = useForm({
  defaultValues: {
    test: defaultVals // this is an array of objects {title: '', id: ''}
  }
})

{
  fields.map((field, idx, arr) => (
    <Input 
      key={field.id}
      name={`test[${idx}]`}
      defaultValue={field.name}
      onChangeText={text => handleInput(text, idx)}
      onAdd={() => append({title: '', id: ''})
      ref={ 
        e => register({ name: `test[${idx}]` 
        Inputs.curent[idx] = e
      })
}

Когда я нажимаю кнопку ввода, он отображает новый ввод, как и ожидалось. Но когда я отправляю данные, я получаю только значения defaultVals, а не данные из нового ввода, хотя у меня есть объект, представляющий этот ввод в массиве test. Кажется, что-то не так с регистрацией входов, но я не могу понять это.

Как мне правильно настроить useFieldArray или использовать другие способы, чтобы динамические поля реагировали нативно с помощью response-hook-form?


react-native javascript react-hook-form
person Dev52    schedule 22.05.2020    source источник
comment
вы пробовали использовать оболочку для ввода с помощью контроллера?   -  person Bill    schedule 23.05.2020
comment
вот пример с Контроллером: codeandbox.io/s/react-hook-form -usefieldarray-vy8fv, я думаю, вы также можете обернуть компонент RN   -  person Bill    schedule 23.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

вы можете попробовать справиться с этой проблемой, как я, используйте каждый элемент с 1 входом и полем, подобным этому

 <Controller
      control={control}
      name="username"
      rules={{
        required: {value: true, message: '* Please enter your username *'},
        minLength: {value: 5, message: '* Account should be 5-20 characters in length! *'},
        maxLength: {value: 20, message: '* Account should be 5-20 characters in length! *'},
        pattern: {value: new RegExp(/^[a-zA-Z0-9_-]*$/), message: '* Invalid character *'},
      }}
      render={({onChange, value}) => (
        <InputRegular
          placeholder="username"
          icon={{
            default: images.iconUser,
            focus: images.iconUser2,
          }}
          onChangeText={(val: string) => {
            onChange(val);
            setValue('username', val);
          }}
          value={value}
        />
      )}
    />

handleSubmit с помощью

const {register, errors, setValue, getValues, control, handleSubmit} = useForm<FormData>({
    defaultValues: {
      username: null,
      email: null,
      password: null,
      rePassword: null,
    },
    mode: 'all',
  });

  useEffect(() => {
    register('username');
    register('email');
    register('password');
    register('rePassword');
  }, [register]);
  const onSubmit = async (data: any) => {
    console.log('====================================');
    console.log('data', data);
    console.log('====================================');
    if (getValues('username')) {
      dispatch(
        actionGetRegister({
          data: {
            username: getValues('username'),
            email: getValues('email'),
            password: getValues('password'),
            secondaryPassword: getValues('secondaryPassword'),
          },
        }),
      );
    }
  };

> 

you can see my post for detail i use react-hook-form for react native

https://medium.com/@hoanghuychh/how-to-use-react-hook-form-with-react-native-integrate-validate-and-more-via-typescript-signup-244b7cce895b
person hoanghuychh    schedule 17.09.2020