React - Mobx検証入力フィールド

Question

入力フィールドでMOBX検証を検索していましたが、何かを見つけることができず、フォームを必要とする「MobX-input」が見つかりましたが、フォームはありません。私が見つけた別のものは、フォームを再び使用するValidatorJsとの "mobx-react-form"でした。ヒントや例があれば分かるはずです。私は単純な入力フィールドでそれを使用できるようにしたいだけです

<Input placeholder="FirstName" type="text" 
defaultValue={Contact.FirstName} onChange={(e) => handler(e)} /> 

Answer 1

簡単な検証は、MobXで簡単に行うことができます。このような単一フィールドの場合、関数を検証する簡単な方法は、次のようになります。

コンポーネントには、入力がサブミットされたかどうかを示すエラーフィールドがあります（ボタンプッシュまたは観測可能なクラスで何でも）

return <div> 
<input placeholder="FirstName" type="text" 
defaultValue={Contact.FirstName} onChange={(e) => handler(e)} /> 
{submitted && <span className="error-message">{Contact.FirstNameError}</span>} 
</div>; 

（私は非デコレータのスタイルを使用）、我々は計算値と観測可能としてフィールドを定義し、エラーメッセージクラス。

class Contact { 
    constructor() { 
    extendObservable({ 
     submitted: false, 
     FirstName: observable(), 
     FirstNameError: computed(() => { 
      if(this.FirstName.length < 10) { 
      return 'First name must be at least 10 characters long'; 
      } 
      // further validation here 
      return undefined; 
     }) 
    }) 
    } 

} 

あなただけで簡単にFirstNameErrorが値を持っているかどうかをチェックし、余分なhasError計算された値を追加することができます。

このメソッドは、いくつかの入力に比例します。あなたがそれらの束を持っている場合、あなたは、サードパーティのライブラリやあなたの検証を管理するために自分自身を書くような抽象化を見たいと思うだろう。小さな構成に基づいて必要とする計算されたプロパティを生成する関数を書くことができます。