如何将 mobx-react-form 与 mobx-state-tree 存储绑定

Question

我有一个包含三个字段 A、B 和 C 的表单。我使用 mobx-react-form 来处理这些字段，因为它带有 onChange 更新和验证功能。我已经设置好了，当我注销时它工作正常值。

const View = inject('store')(observer(({ title }: Props) => {
  return (
    <div>
      <form onSubmit={form.onSubmit}>
        <label htmlFor={form.$('A').id}>
          {form.$('A').label}
        </label>
        <input {...form.$('A').bind()} />

        <label htmlFor={form.$('B').id}>
          {form.$('B').label}
        </label>
        <input {...form.$('B').bind()} />

        <label htmlFor={form.$('C').id}>
          {form.$('C').label}
        </label>
        <input {...form.$('C').bind()} />

        <button type="submit" onClick={form.onSubmit}>
          Submit
       </button>
      </form>
    </div>
  );
}));

我将使用字段 A、B 和 C 中的值来计算将出现在应用程序中的附加值 D 和 E。

对于状态管理，我使用mobx-state-tree来创建商店。

export const Store = types.model('Store', 
{
  A: types.maybeNull(types.number),
  B: types.maybeNull(types.number),
  C: types.maybeNull(types.number),
  D: types.maybeNull(types.number),
  E: types.maybeNull(types.number),
})
  .views(self => {
    return { 
      getD: () => self.D,
      getE: () => self.E 
    };
  })
  .actions(self => {
    return {
      setD: (A, B) => self.D = A + B,
      setE: (B, C) => self.E = C - B,
      resetStore: () => {
        self.A = defaultState.A;
        self.B = defaultState.B;
        self.C = defaultState.C;
        self.D = defaultState.D;
        self.E = defaultState.E;
      },
    };
  });

如何将 mobx-react-form 字段 A、B 和 C 绑定到商店中的相应值，以便它们在更改时更新？

Answer 1

嗯，

首先， 我想让您注意，您正在尝试连接 2 个不同的状态管理器。

我非常喜欢 mobx-recat-form ！但你应该考虑到它 自动为您管理状态。

您可以将自己绑定到 onChange，并相应地更新 D、E。

例如：

<input onChange={e => {
   form.$('B').set(e.target.value);
   // handle D,E according to value
}} />

这是最“直接”的处理方式。 如果你想以更“mobx”的方式解决它，

做这样的事情：

form.$('B')
   .observe(({ form, field, change }) => { 
     // deal with D,E according to values
   });

有关更多信息，我将查看： https://foxhound87.github.io/mobx-react-form/docs/extra/mobx-events.html

我建议坚持使用这个库（mobx-react-form）来控制 表单，并使用直接挂钩（第一个示例）或通过观察表单将更改传播到其他商店中的其他值。