Как сделать форму в React Native? - PullRequest
Новая
       31

Как сделать форму в React Native?

0 голосов
/ 26 апреля 2020

Я хочу сделать форму в реагировать нативно, используя Form Hooks. Это не работает для меня.

Я установил форму подключения с помощью этой команды: 

npm install react-hook-form

И вот мой код: 

import React from "react";
import { useForm } from "react-hook-form";

const InscriptionScreen = () => {
  return (
    <form>
      <input type="text" placeholder="Email" name="email"/>
      <input type="password" placeholder="Password" name="password"/>
      <input type="submit"/>
    </form>
  );
};

export default InscriptionScreen

Я получил это ошибка:

Просмотр конфигурации не найден для ввода имени. Убедитесь, что имена компонентов начинаются с заглавной буквы.

Нужно ли выполнять дополнительные настройки или в моем коде отсутствует ключевое слово?

Ответы [ 2 ]

1 голос
/ 26 апреля 2020

Вы используете HTML элементы в React-Native, вы должны использовать React-Native элементы, а также использовать useForm, как показано ниже: 

import React, { useEffect, useCallback } from 'react';
import { View, TextInput, Button } from 'react-native';
import { useForm } from 'react-hook-form';

const InscriptionScreen = () => {
  const { register, handleSubmit, setValue } = useForm();
  const onSubmit = useCallback(formData => {
    console.log(formData);
  }, []);
  const onChangeField = useCallback(
    name => text => {
      setValue(name, text);
    },
    []
  );

  useEffect(() => {
    register('email');
    register('password');
  }, [register]);

  return (
    <View>
      <TextInput
        autoCompleteType="email"
        keyboardType="email-address"
        textContentType="emailAddress"
        placeholder="Email"
        onChangeText={onChangeField('email')}
      />
      <TextInput
        secureTextEntry
        autoCompleteType="password"
        placeholder="Password"
        onChangeText={onChangeField('password')}
      />
      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
};

export default InscriptionScreen;
0 голосов
/ 26 апреля 2020

Взгляните на документацию, у вас есть пример для реактивной формы (https://react-hook-form.com/get-started#ReactNative): 

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

В React Native у вас нет тот же примитив, что и HTML (div, form, ...). Поэтому вам нужно использовать другой метод, например, компонент Controller из react-hook-form.

...