フォームの値を管理、検証、フォーカス＆服従は退屈な＆種類の一種です.しかし、私たちがそのフォーム管理のものを1つのパッケージに集中させることができるなら、開発者がこれより重要な何かを考えて、開発するのに十分良いでしょう.

Don't reapeat yourself is a thing, There are many plugins available at ease, But...

以前に見たことのあるプラグインは、反応するネイティブよりも反応指向である.Formickのように、それはネイティブに反応するために何か特定のバインダーを持っていません、再び、我々は別々にすべての値またはHndling機能を与えなければなりません、そして、また、我々は我々のコードで焦点を管理する必要があります.

解決-反応Form

だからここに行くreact-formr , パッケージは、反応ネイティブのために書かれます.

機能

指定されたルール(正規表現)または定義済みの型(電子メール、電話、等)のフォームの検証.

入力バインダー機能はほとんどすべて含まれてTextInput フォームを処理するために必要です.

自動フォーカスを押して次の利用可能な入力、トリガonFocuseFinish 最後の入力でキーを押します.

入力ブラーの検証と無効な入力の変更を検証します.

ライブフォームの変更を聞くonChange 小道具

活字で書かれた

テキスト入力に制限されません、それはハンドル値変更と値オブジェクトで何でも使われることができます.

Update: useFormr hook is available now, no need to wrap the form with Formr component anymore.

それを使いましょう

まず第一にyarn add react-formr or npm install react-formrreact-formr

大きなもの

フォームからの完全な利用可能なオプションを持つフォーム

// Formr form manager wrapper
<Former 
    onChange={(values)=>{
            // Triggers if any value change in form
            console.log(values)
        }}
    onFinishFocus={(values)=>{
        // Triggers all form fields finished focusing
            console.log(values)
        }}
    formFields={{ password: "" }} //Initial value can be added here
        validation={{
          password: {
            required: true,
            rules:
              "0-9])(?=.*[a-z].*[a-z].*[a-z]).{8}$",
          }
        }} >
        {// Provides a function to render form inputs }
        {({
          inputBinder, // Package of TextInput props
          onChangeHandler, // included in inputBinder
          values, // included in inputBinder
          onBlurHandler,// included in inputBinder
          onSubmitHandler,
          onSubmitEditingHandler,
          refsHandler,// included in inputBinder
          touched,// included in inputBinder if you are making custom input component with this props
          valid,// included in inputBinder if you are making custom input component with this props
        }) => {
          return (
            <View
              style={{
                flex: 1,
                marginTop: 50,
              }}>
                <TextInput
                  style={{
                    borderColor:
                      valid.email != null && touched.email && !valid.email
                        ? "red"
                        : "black",
                    ...styles.input,
                  }}
                  value={values.password}
                  ref={(ref)=>refsHandler('password',ref)}
                  onBlur={()  =>  onBlurHandler('password')}
                  onChangeText={text=>onChangeHandler('password',text)}
                    onSubmitEditing={()=>onSubmitEditingHandler('password')} 
                />
                <Button onPress={()=>onSubmitHandler(value=>submitIt(value))} />
              </View>
             )//end of return
           }// end of formr function
       }
</Formr>

ショートバージョン

FormrのInputBinder関数のみを使用する

<Former formFields={{ password: "" }}
        validation={{
          password: {
            required: true,
            rules:
              "0-9])(?=.*[a-z].*[a-z].*[a-z]).{8}$",
          }
        }} >

        {({
          inputBinder, 
          onSubmitHandler,
          touched,
          valid
        }) => {
          return (
            <View
              style={{
                flex: 1,
                marginTop: 50,
              }}>
                <TextInput
                  style={{
                    borderColor:
                      valid.email != null && touched.email && !valid.email
                        ? "red"
                        : "black",
                    ...styles.input,
                  }}
                  {...inputBinder("email")} // THIS IS WHERE THE DIFFERENCE COMES
                />
                <Button 
                   onPress={()=>onSubmitHandler(value=>submitIt(value))} 
/>
              </View>
             )//end of return
           }// end of formr function
       }
</Formr>

マイショートバージョン

最短で最も簡単なバージョンは、それの中で扱われるエラーでカスタム入力コンポーネントを作ることです.

CustminMinPutエラーメッセージ付きコンポーネント

const CustomInput = ({valid,value,touched,errorMsg,...rest})=>{
    const showError = value!=="" && valid && touched;
    return(
    <View>
        <TextInput 
            {...rest} 
            value={value} 
            style={
            borderWidth:1,
            borderColor:showError?"red":"gray",
            ...rest.style} 
        />
        {showError && <Text style={color:"red"} >{errorMsg}</Text>}
    </View>)    
}

フォームフォーム

<Former formFields={{ email: "" }}
        validation={{
          password: {
            required: true,
            type:"email"
          }
        }} >
        {({
          inputBinder, // Package of TextInput props.
          onSubmitHandler, // For submitting form.
        }) => {
          return (
            <View
              style={{
                flex: 1,
                marginTop: 50,
              }}>
                <CustomInput 
                    {...inputBinder("email")} 
                    errorMessage="Something is wrong here" 
                 />
                <Button onPress={()=>onSubmitHandler(value=>submitThis(value))} />
              </View>
             )//end of return
           }// end of formr function
       }
</Formr>

簡単じゃない?

スタンドアウト

インプットバインダー

この関数はTextInput 入力でフォームを管理するには、value , onChangeText , onBlur , ref , onSubmitEditing also valid & touched カスタム入力コンポーネントをこれらの小道具で作っているならば.

検証

事前に定義された一般的に使用される型または正規表現を検証するオブジェクトを受け取ります.また、ここで必要なフィールドについても言及できます.

自動焦点入力

それは反応ネイティブプラグインのために構築されているとして、反応フォームのプラグインとは異なり、それは簡単に次の入力(または要素は、REF＆ハンドルフォーカスを持ってフォーカス)を処理します.次の話題でこれについてもっと見ましょう.

共通の問題と解決

オートフォーカス次の入力

最高のユーザーエクスペリエンスは、次のボタンを押すと、すでに表示されているキーボードで次の利用可能な入力をフォーカスするには、誰もフォームを埋めるためにすべての利用可能な入力をタッチしたいです.それは今、すべてのフォームのために必要です.ここでの問題は、入力とそれらの焦点を合わせるrefsを管理するonSubmitEditing .
Formrは、内部にrefsを維持することによってこの煩わしさを解決します.

検証の管理

はい、複数の入力での検証の管理は非常に長いまたは予期せず複雑になります.検証処理の独自の型を持つすべてのフィールドでは、対話後にエラーを表示するように、触れられた状態を処理する必要があります.
Formは私たちが何度も何度も書きたくないものを持っています.つのパッケージは、タッチ状態管理、バリデーションサイクル、検証のためのフォーカスイベントなどを扱います.また、任意の値の変更または送信を押してフィールドを検証し、有効なオブジェクトを更新し、それは未入力の入力フィールドに焦点を当てます.

フォーム値の管理

入力値の複数の状態を維持する必要があるかもしれません.
Formは初期値を受け取り、任意のフォームフィールドの更新時に管理し、値オブジェクトとして値のオブジェクトを提供しますonSubmit , インonFinishFocus プロップ,インonChange プロップ

ファイナル

私は自分のプロジェクトに取り組んでいる間、何度も何度も書いていると感じました.それをするためにどんなプラグインのためにでも行こうとするならば、それ自身の学習曲線と道ブロックを持っています、あるいは、私は1つのフォームをするために複数のプラグインを使わなければなりません.それで、私はあなたの皆と共有するパッケージを作成しました.私がこれで改善することができるならば、私に示唆してください.
国立天文台
react-formr
ギタブ
react-formr
my github profile