React - Mobx 验证输入字段

Question

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

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

在observableclass中（我用的是非装饰器风格），我们定义字段为observable，错误信息class作为计算值。

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 是否有值。

此方法可扩展到几个输入。如果你开始有一堆，那么你会想要研究一个抽象，比如第 3 方库或你自己编写的东西来管理你的验证。您可以编写一个函数来根据一些配置生成您需要的计算属性。

React - Mobx 验证输入字段

React - Mobx Validation input Field

mobx

mobx-react