Question

我一直在输入字段上搜索MOBX验证，但我找不到任何东西，我发现需要表单的“MobX-input”但我没有任何形式。另一个我发现的是“mobx-react-form”与ValidatorJs再次使用form。任何提示或例子将不胜感激。我只是想在普通输入字段上使用它

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

Answer 1

使用MobX可以很容易地自行创建简单的验证。对于像这样的单个字段，验证函数的简单方法可能如下所示：

在组件中我们有一个错误字段，只显示输入是否已提交（可以通过按钮或任何其他方式触发）

Enable-Migrations is obsolete. Use Add-Migration to start using Migrations.

在observable类中（我使用了非装饰器样式），我们将字段定义为可观察对象，将错误消息类定义为计算值。

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; }) }) } }计算值，只检查hasError是否有值。

此方法可扩展为少量输入。如果您开始使用它们，那么您希望查看像第三方库这样的抽象或您自己编写的内容来管理您的验证。您可以编写一个函数来根据一点配置生成所需的计算属性。

React - Mobx验证输入字段

1 个答案: