정확한 방식으로 반응하다😎

react-native에서 폼을 처리하는 것은 react-native 개발자의 여정에서 중요한 작업입니다. 만약 프로그램이 대부분의 상황에서 데이터를 검색한다면, 폼을 처리하지 않은 상태에서 새로운react-native 프로그램을 개발할 수 없습니다. 적어도 로그인과 등록 화면에서는 이렇습니다.이런 중복된 임무를 위해 해결 방안을 찾는 것은 다음 돌진을 위해 많은 시간을 절약하는 데 도움이 될 것이다😉.
react 로컬 개발자로서의 2년 경험을 통해 저는 다른 방법으로 폼을 처리한 적이 있지만 새로운 글의 가장 좋은 해결 방안에 대해 자신이 없습니다.오늘 다음 react native 프로젝트에서 폼을 처리하는 정확한 방법을 여러분과 공유할 자신 있습니다.나는 당신이 이 해결 방안에 대한 평론과 생각을 듣고 매우 기뻤다. (이것이 바로 내가 이 글을 공유한 이유이다)
본고는 일반적인 폼 구성 요소를 만드는 데 목적을 두고 있으며 폼을 처리할 때 언제든지 사용할 수 있는 단계별 강좌이다.

if you are impatient and want to go straight to the code, you can play around with the solution in this Snack Editor Project. 😀

접근
이 아이디어는 스마트 폼 구성 요소의 권한 수여react-hook-form를 바탕으로 입력 하위 항목을 구성하여 데이터를 수집하고 오류를 자동으로 처리할 수 있다.또한 우리는 next 키보드 단추를 누르고 입력에 키보드 감지 기능을 추가한 후 다음 입력에 자동으로 초점을 맞추는 자동 방식을 제공할 것이다.
명확하게 보기 위해서, 우리는 먼저 오류 처리가 있는 사용자 정의 입력 구성 요소를 만들어야 한다.그리고 스마트 폼 구성 요소를 만들어서 각 구성 요소에 모든react-hook-form 속성을 정확하게 주입하고 마지막으로 자동 초점과 키보드 감지 기능을 실현한다.
이것은 우리 일의 최종 결과다.

You can’t record keyboard for secureTextEntry={true} Input, that's why you are seeing my password 😀

Video Demo

Befor starting I think you are wondering 👇

왜 갈고리가 형성되어야 하는가
폼React-hook-form official documentation,React-Hook 폼의 주요 목표 중 하나는 반드시 작성해야 하는 코드량을 줄이는 것이다.우리의 최종 결과를 보면, React hooks 폼은 소량의 코드만 있으면 매우 사용하기 쉽다는 것을 알 수 있다.더 중요한 것은 우리가 react-hook-formReact에서 폼을 처리하는 데 가장 자주 사용하는 해결 방안(예를 들어 Formik과redux 폼)과 비교할 수 있다면 패키지 크기와 성능react-hook-form이 분명히 이길 것이다.
React hook 양식 홈 페이지에는 다른 라이브러리에 사용해야 하는 이유를 설명하는 전체 섹션이 포함되어 있습니다.

Let’s get started

사용자 정의 입력 만들기
첫 번째 단계에서는 오류 처리가 있는 사용자 정의 텍스트 입력 구성 요소를 만듭니다. 보시다시피 구성 요소를 최대한 간단하게 만들려고 했지만, 필요에 따라 구성 요소의 스타일을 설정할 수 있고, 내장 UI 라이브러리의 텍스트 입력을 사용할 수도 있습니다. 예를 들어 저희react-paper나 native-base사용자 정의 입력이 React forward API를 실현하고 Requiredname 속성을 가지면 입력이 어떻게 이루어지든지 간에 이 해결 방안은 예상대로 작동합니다.

import * as React from 'react'
import {
  View,
  TextInput,
  Text,
  StyleSheet,
  ViewStyle,
  TextStyle,
  TextInputProps,
} from 'react-native'
import { FieldError } from 'react-hook-form'
interface Props extends TextInputProps {
  name: string
  label?: string
  labelStyle?: TextStyle
  error?: FieldError | undefined
}

export default React.forwardRef<any, Props>(
  (props, ref): React.ReactElement => {
    const { label, labelStyle, error, ...inputProps } = props

    return (
      <View style={styles.container}>
        {label && <Text style={[styles.label, labelStyle]}>{label}</Text>}
        <TextInput
          autoCapitalize="none"
          ref={ref}
          style={[
            styles.inputContainer,
            { borderColor: error ? '#fc6d47' : '#c0cbd3' },
          ]}
          {...inputProps}
        />
        <Text style={styles.textError}>{error && error.message}</Text>
      </View>
    )
  }
)

저희 구성 요소의 InputProps 형식을 사용하여 사용자 정의 형식을 실현할 수 있으며, 다음 단계에 대한 구성 요소를 준비할 수 있습니다.

양식 구성 요소 만들기
폼 구성 요소 뒤에 있는 사상은 구성 요소의 하위 단계를 교체하고 정확한 속성을 추가해서 모든 입력을 등록하는 것이다.
폼 구성 요소는 useForm 갈고리에서 도구를 받을 것입니다. 폼 구성 요소가 정상적으로 작동하도록 이 속성을 전달해야 합니다.

register: 이 방법은 유일한 이름과 검증 규칙을 가진 입력 Ref를 React Hook 폼에 등록할 수 있도록 합니다.

  register: ({name}: {name: string}, validation: ValidationOptions) => void;

setValue: 이 함수는 name 속성을 사용하여 입력 값을 올바른 ref로 동적으로 설정하는 데 도움을 줍니다.사용자 정의 레지스터를 사용하여 호출하기 때문에 setValue를 사용해야 합니다.

  setValue: (name: string, value: string, shouldValidate?: boolean) => void;

오류: 폼 오류와 입력에 대응하는 오류 메시지를 포함하는 대상입니다.

유효성 검사: 입력한 각 양식 유효성 검사 규칙이 포함된 객체입니다.

If you are not familiar with react-hook-form, check the docs here

입력 하위 요소에 도구를 주입하기 위해 React.createElement API를 사용하여 각 속성name의 하위 요소에 새 요소를 생성합니다.name 속성을 사용하면 폼 데이터의 일부분으로 필요한 모든 입력을 필터하거나 하위 항목을 되돌려줍니다. 새 하위 항목을 만들 필요가 없습니다. (그렇지 않으면)
모든 입력 서브레벨에 대해 우리는 register 함수를 사용하여 수동으로 입력ref를 등록하고 검증 규칙을 주입합니다.
사용자 정의 레지스터 호출을 사용하면 setValue 입력 속성을 사용하여 수동으로 입력 값을 업데이트해야 합니다onChangeText.
마지막으로, 우리는 모든 입력에 대응하는 오류와 오류 메시지를 추가할 것입니다.

export default ({
  register,
  errors,
  setValue,
  validation,
  children,
}: Props) => {
  return (
    <>
      {(Array.isArray(children) ? [...children] : [children]).map(child => {
        return child.props.name
          ? React.createElement(child.type, {
              ...{
                ...child.props,
                ref: () => {
                  register(
                    { name: child.props.name },
                    validation[child.props.name]
                  )
                },
                onChangeText: (v: string) =>
                  setValue(child.props.name, v, true),
                key: child.props.name,
                error: errors[child.props.name],
              },
            })
          : child
      })}
    </>
  )
}

현재, 우리의 폼 구성 요소는 이미 준비가 되었지만, 본문을 끝내기 전에, 나는 폼 구성 요소를 개선하는 방법을 제공함으로써 next 키보드 단추를 눌렀을 때 자동으로 다음 입력에 초점을 맞추고 싶다. 이것은 양호한 사용자 체험을 확보하는 중요한 기능이라고 생각한다.
react native에서 초점 입력에 초점을 맞추는 유일한 방법은 입력 실례를 위한 ref 를 설정하고 초점 입력이 필요할 때focus 방법을 호출하는 것입니다.
이 점을 실현하기 위해서, 우리는 모든 입력 인용에 접근하여 다음 입력을 검출하고 포커스 방법을 호출해야 한다.
양식 구성 요소에서 Inputs React Ref를 사용하여 이러한 작업을 수행한 다음 하위 객체를 하나씩 밀어 넣고 Ref를 입력할 수 있습니다.
다음 입력에 초점을 맞추려면 onSubmitEditing 속성을 실현하고 next 키보드 단추를 누르면 이 속성을 호출해야 합니다.다음 입력 인용 호출 focus 방법으로 다음 입력에 초점을 맞춰야 합니다. 다음 입력 인용이 존재하지 않으면blur를 호출합니다.
특히 onSubmitEditing 리셋은 블루 이벤트 이후에 호출되었다.따라서 키보드가 바로 다음 요소에 주목하면 미칠 수도 있다.blurOnSubmit={false}를 양식의 모든 요소로 설정하면 도움이 될 수 있습니다.

import * as React from 'react';
import {TextInput} from 'react-native';
import {ValidationOptions, FieldError} from 'react-hook-form';

interface ValidationMap {
  [key: string]: ValidationOptions;
}

interface ErrorMap {
  [key: string]: FieldError | undefined;
}

interface Props {
  children: JSX.Element | JSX.Element[];
  register: ({name}: {name: string}, validation: ValidationOptions) => void;
  errors: ErrorMap;
  validation: ValidationMap;
  setValue: (name: string, value: string, validate?: boolean) => void;
}

export default ({
  register,
  errors,
  setValue,
  validation,
  children,
}: Props) => {
  const Inputs = React.useRef < Array < TextInput >> []

  return (
    <>
      {(Array.isArray(children) ? [...children] : [children]).map(
        (child, i) => {
          return child.props.name
            ? React.createElement(child.type, {
                ...{
                  ...child.props,
                  ref: (e: TextInput) => {
                    register(
                      { name: child.props.name },
                      validation[child.props.name]
                    )
                    Inputs.current[i] = e
                  },
                  onChangeText: (v: string) =>
                    setValue(child.props.name, v, true),
                  onSubmitEditing: () => {
                    Inputs.current[i + 1]
                      ? Inputs.current[i + 1].focus()
                      : Inputs.current[i].blur()
                  },
                  blurOnSubmit: false,
                  key: child.props.name,
                  error: errors[child.props.name],
                },
              })
            : child
        }
      )}
    </>
  )
}

마지막 단계는 react-native-keyboard-aware-scroll-view 구성 요소를 사용하여 키보드의 외관을 처리하고 초점 텍스트 입력으로 자동으로 스크롤하는 것이다.
네!우리의 폼 구성 요소는 이미 생산을 준비했다😎너는 이것Snack Editor Project에서 그것을 가지고 놀 수 있다.

//App.tsx

type FormData = {
  name: string
  email: string
  password: string
}

export default () => {
  const { handleSubmit, register, setValue, errors } = useForm<FormData>()

  const onSubmit = (data: FormData) => {
    Alert.alert('data', JSON.stringify(data))
  }

  return (
    <KeyboardAwareScrollView contentContainerStyle={styles.container}>
      <Hero />
      <View style={styles.formContainer}>
        <Form {...{ register, setValue, validation, errors }}>
          <Input name="name" label="Name " />
          <Input name="email" label="Email" />
          <Input name="password" label="Password" secureTextEntry={true} />
          <Button title="Submit" onPress={handleSubmit(onSubmit)} />
        </Form>
      </View>
    </KeyboardAwareScrollView>
  )
}

나는 네가 이것이 매우 재미있고 정보가 풍부하며 매우 재미있다고 느끼기를 바란다.나는 당신이 이 해결 방안에 대한 평론과 생각을 평론에서 듣고 매우 기뻤다.
만약 다른 사람들이 이 글을 읽어야 한다고 생각한다면.트위터, 공유, 다음 글 공유.

Originally published on https://obytes.com/