Javascript React-Native中的React-Hook表单useFieldArray

我试图在react native中使用带有react钩子形式的动态字段。我最初尝试手动注册所有内容，但没有成功。然后我尝试使用useFieldArray钩子，但是所有新创建的字段都没有正确注册。以下是我的最新方法：

我有一个自定义组件来模拟react native TextInput的web界面，并转发ref

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

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

const Input=forwardRef（（props，ref）=>{
常数{
奥纳德，
…输入道具
}=道具
返回(
onAdd（）}/>
)
}

然后，我根据useFieldArray文档在表单中的显示方式使用该组件，但我有一个自定义更改处理程序。我还显式设置了ref，并尝试注册单个新字段

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
      })
}

const Inputs=useRef（[]）
const{control，register，setValue，handleSubmit，errors}=useForm({
默认值：{
test:defaultVals//这是一个对象数组{title:''，id:''}
}
})
{
fields.map（（field，idx，arr）=>(
handleInput（文本，idx）}
onAdd={（）=>append（{title:''，id:''}）
ref={
e=>寄存器（{name:`test[${idx}]`
输入电流[idx]=e
})
}

当我点击输入按钮时，它会按预期呈现一个新的输入。但是当我提交数据时，我只获取defaultVals值，而不是来自新输入的数据，尽管我在

测试

数组中确实有一个表示该输入的对象。输入的注册似乎有问题，但我无法处理我的手指不在上面

---

如何正确设置useFieldArray或利用其他方法使动态字段以react-native with react-hook形式出现？

您可以像我一样尝试处理此问题，使用每个元素和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}
        />
      )}
    />

(
{
onChange（val）；
setValue（'username'，val）；
}}
value={value}
/>
)}
/>

手推

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

const{register，errors，setValue，getValues，control，handleSubmit}=useForm({
默认值：{
用户名：null，
电子邮件：空，
密码：null，
rePassword:null，
},
模式：“全部”，
});
useffect（（）=>{
注册（“用户名”）；
注册（“电子邮件”）；
注册（“密码”）；
寄存器（“重密码”）；
}，[登记册]；
const onSubmit=async（数据：any）=>{
console.log（'===================================================='）；
console.log（'data'，data）；
console.log（'===================================================='）；
if（getValues（'username'））{
派遣(
actionGetRegister({
数据：{
用户名：getValues（'username'），
电子邮件：getValues（“电子邮件”），
密码：getValues（'password'），
secondaryPassword:getValues（'secondaryPassword'），
},
}),
);
}
};
> 
您可以查看我的帖子，了解我使用react-hook表单进行react-native的详细信息
https://medium.com/@hoanghuychh/how-to-use-react-hook-form-with-react-native-integrate-validate-and-more-via-typescript-signup-244b7cce895b

您是否尝试过使用控制器包装您的输入？下面是控制器的一个示例：我认为您也可以使用RN组件包装