react-native - 如何使用自定义注册方法在 react-native 中的 react-hook-form 中设置默认值

Question

我正在测试反应钩子形式并参考此处的文档。请注意，这个问题专门指的是手动注册的自定义注册方法。

如文档defaultValues中所述，传入不起作用useForm()，因为defaultValues不会使用手动注册的输入自动填充。

在那种情况下，有没有办法使用这种方法设置默认值？

export default function App() {
  const { register, setValue, errors } = useForm()

  return (
    <View>
      <Text>First name</Text>
      <TextInput
        ref={register({ name: 'firstName'}, { required: true })}
        onChangeText={text => setValue('firstName', text, true)}
      />
      {errors.firstName && <Text>This is required.</Text>}
    </View>
  )
}

Answer 1

从反应钩子形式反应本机使用控制器

例子

import React from "react";
import { Text, View, TextInput, Button, Alert } from "react-native";
import { useForm, Controller } from "react-hook-form";
export default function App() {
  const { control, handleSubmit, errors } = useForm();
  const onSubmit = data => Alert.alert(
    "Form Data",
    JSON.stringify(data),
  );

  return (
    <View>
      <Text>First name</Text>
      <Controller
        as={TextInput}
        control={control}
        name="firstName"
        onChange={args => args[0].nativeEvent.text}
        rules={{ required: true }}
        defaultValue=""
      />
      {errors.firstName && <Text>This is required.</Text>}

      <Text>Last name</Text>
      <Controller
        as={TextInput}
        control={control}
        name="lastName"
        onChange={args => args[0].nativeEvent.text}
        defaultValue=""
      />


      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

有关更多信息，请在此处查看文档