阵营 - 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验证输入字段

回答

相关问题