陣營 - Mobx驗證輸入字段

我一直在尋找一個輸入字段MOBX驗證，但我還沒有能夠找到的任何東西，我發現「MobX輸入」這需要一個形式，但我沒有任何形式的。另外一個，我發現了「mobx反應的形式」用ValidatorJs其中再次使用形式。任何提示或示例將不勝感激。我只是想能夠在普通輸入字段上使用它陣營 - Mobx驗證輸入字段

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

來源

2017-09-05 benji_r

簡單的驗證非常容易使用MobX自行創建。對於像這樣的單個字段，驗證函數的一個簡單方法可能如下所示：

在組件中，我們有一個錯誤字段，只有在輸入已提交時纔會顯示（可以通過按鈕按鈕或無論）

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

在可觀察到的類（I所用的非裝飾樣式），我們將該字段定義爲可觀察到的，和一個錯誤消息類作爲計算值。

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; 
     }) 
    }) 
    } 

}

你可以輕鬆地添加一個額外hasError計算值，只是檢查是否FirstNameError有一個值。

這種方法擴展到幾個輸入。如果你開始有一羣人，那麼你會希望尋找到像你自己寫來管理您的驗證第三方庫或東西的抽象。你可以寫一個函數生成你需要基於一個小配置的計算性能。

來源

2017-09-06 02:39:01

陣營 - Mobx驗證輸入字段

回答

相關問題