反応フック形式を用いた自然反応—パートI(設定と検証)

反応の形は、常に痛い点でした.私は個人的に解決策の多くを試みた(reduxフォーム、リフティング状態など)が、実際にはそれらと一緒に仕事を楽しんだ.ありがたいことに、今はもっと良いことですFormik and React Hook Form .
反応フック形式(RHFと呼ばれる)をWebのためのいくつかの例/チュートリアルがありますので、このポストでは、我々はどのようにセットアップし、反応するネイティブフォームでrhfを使用する方法を学びます.
私たちは反応ネイティブアプリケーションを作成し、依存関係をインストールすることによって開始しましょう(私はエキスポを使用しているでしょう、反応ネイティブのinitを使用して自由に感じる).

expo init form-example

cd form-example && yarn add react-hook-form react-native-tailwindcss

私たちは今、2つの入力、名前と電子メールで基本的なフォームを構築します.この例で使用する2つのコンポーネントを作成しましょう.プロジェクトのルートで、フォルダを作成しますcomponents . ファイルを作成Button.js and Input.js .

ボタン.js

// Button.js

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { t } from 'react-native-tailwindcss';

export default function Button({ label, ...props }) {
  return (
    <TouchableOpacity activeOpacity={0.8} {...props} style={styles.button}>
      <Text style={styles.buttonLabel}>{label}</Text>
    </TouchableOpacity>
  );
}

const styles = {
  button: [t.selfStretch, t.bgGreen600, t.itemsCenter, t.pY3, t.rounded],
  buttonLabel: [t.textWhite, t.textLg]
};

入力.js

// Input.js

import React from 'react';
import { View, Text, TextInput } from 'react-native';
import { t } from 'react-native-tailwindcss';

export default function Input(props) {
  return (
    <View style={styles.wrapper}>
      <TextInput
        style={[styles.input, props.error && t.borderRed500, props.style]}
        {...props}
      />
      {props.errorText && (
        <Text style={styles.errorText}>{props.errorText}</Text>
      )}
    </View>
  );
}

const styles = {
  wrapper: [t.selfStretch, t.mB5],
  input: [
    t.h11,
    t.border,
    t.selfStretch,
    t.p2,
    t.borderGray500,
    t.rounded,
    t.textBase,
    t.textGray700
  ],
  errorText: [t.mT1, t.textRed500]
};

今の内容を取り替えましょうApp.js 以下のファイル

//  App.js

import React, { useState } from 'react';
import { StyleSheet, Switch, Text, View } from 'react-native';
import { t, color } from 'react-native-tailwindcss';

import Input from './components/Input';
import Button from './components/Button';

export default function App() {
  const [isBillingDifferent, setIsBillingDifferent] = useState(false);

  const toggleBilling = () => {
    setIsBillingDifferent((prev) => !prev);
  };

  return (
    <View style={styles.container}>
      <Input placeholder="Name" />
      <Input placeholder="Email" />
      <View style={styles.switch}>
        <Text style={styles.switchText}>Billing different</Text>
        <Switch
          trackColor={{ false: color.gray200, true: color.green600 }}
          thumbColor={color.gray100}
          ios_backgroundColor={color.gray800}
          onValueChange={toggleBilling}
          value={isBillingDifferent}
        />
      </View>
      {isBillingDifferent && (
        <>
          <Input placeholder="Billing name" />
          <Input placeholder="Billing email" />
        </>
      )}
      <Button label="Submit" />
    </View>
  );
}

const styles = {
  container: [t.flex1, t.justifyCenter, t.itemsCenter, t.p6, t.bgGray200],
  switch: [t.mB4, t.selfStart, t.flexRow, t.itemsCenter],
  switchText: [t.textBase, t.mR3, t.textGray800]
};

今我々は我々のアプリを実行すると、我々はこのようなものを見る必要があります、我々は2つの余分なフィールドを表示する間に切り替えるスイッチを持っていることに注意してください(この記事のパート2でそれらを使用します).

だから我々の基本的なUIのセットアップを行っている、今我々のアプリにrhfを追加しましょう.最後のインポートの下に次の行を追加します

import { useForm, Controller } from 'react-hook-form';

我々は現在、useForm フックを取得するにはhandleSubmit and control 値.

// export default function App() {
const { handleSubmit, control } = useForm();

WRITEネイティブのRHFを使用すると、Webの反応より少し異なります.反応して、我々はできるregister そのref(またはいくつかのコンポーネントライブラリの場合のinputref)を通じた入力.
しかし、ネイティブの反応の場合、我々はController コンポーネントとレンダリングInput レンダプロップ内.また、名前を与え、それを制御プロップに渡す必要があります.それに従って我々のコードを変えて、それがどのように見えるかについて見ましょう

<Controller
    name="name"
    control={control}
    render={({ onChange, value }) => (
        <Input
          onChangeText={(text) => onChange(text)}
          value={value}
          placeholder="Name"
        />
    )}
  />

我々は、我々のために同じことをしますEmail フィールドと名前とプレースホルダのプロップに応じて置き換えます.
この時点で我々のアプリを実行すると、我々はおそらく警告を得る私たちを追加するにはdefaultValue 我々のフィールドのために.フィールドのデフォルト値を追加します

//<Controller
    defaultValue=""
//  name="name"

//<Controller
    defaultValue=""
//  name="email"

それで、我々がRHFで我々のフォームを配線した今、これらの値をSubmit ボタン.そうするために、我々はワイヤーを開く必要があるhandleSubmit を使用してください.内部handleSubmit 我々は、我々のパスonSubmit 関数.
にonSubmit 関数は、入力された値をログ出力します.

<Button onPress={handleSubmit(onSubmit)} label="Submit" />

// onSubmit method
const onSubmit = (data) => {
  console.log(data, 'data');
};

ここで、いくつかの値を入力してボタンを押すと、このようなログが表示されます.

これまではとても良い!フィールドにいくつかの検証を追加し、フィールドが満たされていないときにユーザーに通知しましょう.
まず、フィールドコントローラのルールを追加する必要がありますerrors からのオブジェクトuseForm フックは、フォーム内のエラーをチェックします.

// export default function App() {
const { handleSubmit, control, errors } = useForm();

// name controller
// control={control}
rules={{
    required: { value: true, message: 'Name is required' }
  }}

// email controller
// control={control}
rules={{
    required: { value: true, message: 'Email is required' }
  }}

我々はまた、使用することに注意してくださいrules={{required: true}} エラーメッセージを別々に設定します.今すぐ追加しましょうerror and errorText 我々の小道具Input コンポーネント.

// name input
<Input
    error={errors.name}
    errorText={errors?.name?.message}
 // onChangeText={(text) => onChange(text)}


// email input
<Input
    error={errors.email}
    errorText={errors?.email?.message}
 // onChangeText={(text) => onChange(text)}

よくできた!フィールドを埋めずにsubmitボタンを押すと、次のようになります

つの最後の事!また、有効な電子メールIDを提出するだけのチェックを加えましょう.だから我々は別のルールを追加するemail フィールドpattern .
名前自体はかなり自明ですので、私たちの入力を検証するために電子メールRegexを必要とします.(私は完全にregexをコピーしませんでしたhere !)

// After the last import statement
const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

// email controller
// required: { value: true, message: 'Email is required' },
   pattern: {
     value: EMAIL_REGEX,
     message: 'Not a valid email'
   }

すごい!今、我々は正常に我々のフォームに電子メールの検証を追加しました.

では、バックエンドAPIからデータを入力フィールドに取り込み、編集する方法を学びます.また、条件フィールド(ユーザー入力に基づいたフィールド)を行う方法を見てみましょう.
読んでくれてありがとう❤️ あなたがそれが役に立つとわかるならば!
ハッピーコーディング!