なぜあなたが反応するフォームの新しいライブラリが必要ですか?


こんにちは!
現時点では、反応のフォームの多くのライブラリがあります.
解析の結果,大部分の問題を見出した.
私はそれについて話をして、我々の解決を提案したいです.

問題:あなたのJSXで特定の構文を使用する必要があります。


例1
import { Formik, Field, Form, ErrorMessage } from 'formik';

<Formik>
    <Form>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" type="text" />
        <ErrorMessage name="firstName" />
   </Form>
</Formik>
例2
import { Form, Field } from ‘react-final-form’;
<Form>
    <Field name="bio"render={({ input, meta }) => (
        <div>
          <label>Bio</label>
         <textarea {...input} />
    {meta.touched && meta.error && <span>{meta.error}</span>}
        </div>
        )}
    />
</Form>

何か
  • 現在プロジェクトをお持ちなら、すべてのUIコンポーネントを特定の構文に戻す必要があります.
  • 今日まで、開発者は数百万のUIライブラリを持っています.
    なぜあなたはそれをインストールし、それを使用することはできませんか?
    ラッパーコンポーネントを作成し、ライブラリを使用するロジックを適応する必要があります.
  • 我々は大きなアプリケーションを再実行するための時間を計算しました.
    数ヶ月からバグを修正し、構文を変えることが必要です.
    ビジネスのために巨大な狂気.

    解決策


    ときに最初の瞬間にフォームライブラリを考える必要がある?
    はい、妥当性検査が必要な場合.
    フォームライブラリはデータについてのみ知る必要があります.
    たとえば、データ行が有効かどうか.
    *-あなたのアプリケーションの構造について.
  • 内部のJSXまたはUIコンポーネントについてではありません.
  • UIロジックについてではない.
    フォームシステムは抽象的でなければなりません.これはスマートusestate ()のようです.
  • あなたのアプリケーションを簡単に、ちょうどデータにコンポーネントを接続する必要があります.

    どのように見ることができます。


    長い分析の後、我々は我々の図書館を作ることに決めました.
    フォームを作成するには、2つの簡単な手順が必要です.
  • フォームデータの検証といくつかのプロパティを記述するスキームを定義します.
  • メソッドを使用してスキームをUIコンポーネントに接続します.
  • スキーム
    // scheme.ts
    export default {
     valid: null,
     formValue: {
        first_name: "",
        last_name: "",
     },
     rules: {
        full_name: [
            ["empty", "please enter your full name"]
        ],
        email: [
            ["empty", "please enter your email"],
            ["email", "is not email"],
        ]
     }
    }
    
    フォーム
    //MyForm.ts
    import {useFormMod} from "formmod";
    
    export const MyForm = () => {
    const {setValue, getValue, getError, validate} = useFormMod(
        FORM_SCHEME
    );
    return (
    <form onSubmit={handlerSubmit}>
        …
        <MyTextInput
            label={"Full name"}
            value={getValue("full_name")}
            error={getError("full_name")}
            onChange={(value: string) => setValue("full_name", value)}
        />
        …
    </form>
    );
    
    完全なドキュメント
    https://doc.formmod.org/
    **ラップトップまたはデスクトップデバイスを使用してドキュメントを読むことをお勧めします.

    長所

  • 無依存.これが単純な仕事の力だ.このフォームシステムは、コンポーネント、JSX、あなたのアプリケーション、ストアについて知りません.もはやJAPXの構文を理解するラッパーのコンポーネントを作成する必要があります.だけで何かを使用します.
  • 簡単なシステム、簡単なコード.それは非常に簡単です.
  • 時間を節約できます.ちょうどプロパティをコンポーネントに接続します.
  • 重要


    私たちは最近図書館を終えた.
    今日まで私たちは151安打、私たちのリポジトリの14のリリースを持っている、これはちょうど仕事の始まりです.
    我々は、ドキュメントを修正するコミュニティとの作業を開始しました.
    私たちはあなたのサポートが必要です.
    gitHub page
    その他の機能
    また、私たちのライブラリは、オプション、グループ、複合コンポーネントで動作することができます.
    それはCRUD、ストア(可能なデータについて)とより多くで仕事を記述しました.
    それは絶対に無料です.
    我々は世界社会のために働いている.
    我々は皆のための開発easerを作りたい.
    読んでくれてありがとう!