なぜあなたが反応するフォームの新しいライブラリが必要ですか?
3505 ワード
こんにちは!
現時点では、反応のフォームの多くのライブラリがあります.
解析の結果,大部分の問題を見出した.
私はそれについて話をして、我々の解決を提案したいです.
例1
現在プロジェクトをお持ちなら、すべてのUIコンポーネントを特定の構文に戻す必要があります. 今日まで、開発者は数百万のUIライブラリを持っています.
なぜあなたはそれをインストールし、それを使用することはできませんか?
ラッパーコンポーネントを作成し、ライブラリを使用するロジックを適応する必要があります. 我々は大きなアプリケーションを再実行するための時間を計算しました.
数ヶ月からバグを修正し、構文を変えることが必要です.
ビジネスのために巨大な狂気.
ときに最初の瞬間にフォームライブラリを考える必要がある?
はい、妥当性検査が必要な場合.
フォームライブラリはデータについてのみ知る必要があります.
たとえば、データ行が有効かどうか.
*-あなたのアプリケーションの構造について.内部のJSXまたはUIコンポーネントについてではありません. UIロジックについてではない.
フォームシステムは抽象的でなければなりません.これはスマートusestate ()のようです. あなたのアプリケーションを簡単に、ちょうどデータにコンポーネントを接続する必要があります.
長い分析の後、我々は我々の図書館を作ることに決めました.
フォームを作成するには、2つの簡単な手順が必要です.フォームデータの検証といくつかのプロパティを記述するスキームを定義します. メソッドを使用してスキームをUIコンポーネントに接続します. スキーム
https://doc.formmod.org/
**ラップトップまたはデスクトップデバイスを使用してドキュメントを読むことをお勧めします.
無依存.これが単純な仕事の力だ.このフォームシステムは、コンポーネント、JSX、あなたのアプリケーション、ストアについて知りません.もはやJAPXの構文を理解するラッパーのコンポーネントを作成する必要があります.だけで何かを使用します. 簡単なシステム、簡単なコード.それは非常に簡単です. 時間を節約できます.ちょうどプロパティをコンポーネントに接続します.
私たちは最近図書館を終えた.
今日まで私たちは151安打、私たちのリポジトリの14のリリースを持っている、これはちょうど仕事の始まりです.
我々は、ドキュメントを修正するコミュニティとの作業を開始しました.
私たちはあなたのサポートが必要です.
gitHub page
その他の機能
また、私たちのライブラリは、オプション、グループ、複合コンポーネントで動作することができます.
それはCRUD、ストア(可能なデータについて)とより多くで仕事を記述しました.
それは絶対に無料です.
我々は世界社会のために働いている.
我々は皆のための開発easerを作りたい.
読んでくれてありがとう!
現時点では、反応のフォームの多くのライブラリがあります.
解析の結果,大部分の問題を見出した.
私はそれについて話をして、我々の解決を提案したいです.
問題:あなたの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>
例2import { 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>
何かなぜあなたはそれをインストールし、それを使用することはできませんか?
ラッパーコンポーネントを作成し、ライブラリを使用するロジックを適応する必要があります.
数ヶ月からバグを修正し、構文を変えることが必要です.
ビジネスのために巨大な狂気.
解決策
ときに最初の瞬間にフォームライブラリを考える必要がある?
はい、妥当性検査が必要な場合.
フォームライブラリはデータについてのみ知る必要があります.
たとえば、データ行が有効かどうか.
*-あなたのアプリケーションの構造について.
フォームシステムは抽象的でなければなりません.これはスマートusestate ()のようです.
どのように見ることができます。
長い分析の後、我々は我々の図書館を作ることに決めました.
フォームを作成するには、2つの簡単な手順が必要です.
// 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/
**ラップトップまたはデスクトップデバイスを使用してドキュメントを読むことをお勧めします.
長所
重要
私たちは最近図書館を終えた.
今日まで私たちは151安打、私たちのリポジトリの14のリリースを持っている、これはちょうど仕事の始まりです.
我々は、ドキュメントを修正するコミュニティとの作業を開始しました.
私たちはあなたのサポートが必要です.
gitHub page
その他の機能
また、私たちのライブラリは、オプション、グループ、複合コンポーネントで動作することができます.
それはCRUD、ストア(可能なデータについて)とより多くで仕事を記述しました.
それは絶対に無料です.
我々は世界社会のために働いている.
我々は皆のための開発easerを作りたい.
読んでくれてありがとう!
Reference
この問題について(なぜあなたが反応するフォームの新しいライブラリが必要ですか?), 我々は、より多くの情報をここで見つけました https://dev.to/nickorsk2017/why-you-need-a-new-library-for-forms-on-react-2jh8テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol