Как связать mobx-реагировать-форму с хранилищем mobx-state-tree - PullRequest
Новая
       36

Как связать mobx-реагировать-форму с хранилищем mobx-state-tree

0 голосов
/ 01 декабря 2018

У меня есть форма с тремя полями A, B и C. Я использую mobx-реагировать-форму , чтобы обработать поля, потому что она поставляется с обновлениями 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 к соответствующим значениям в магазине, чтобы они обновлялись при изменении?

1 Ответ

0 голосов
/ 01 декабря 2018

Ну,

Прежде всего, я хочу, чтобы вы заметили, вы пытаетесь соединить 2 разных менеджера состояний.

Мне очень нравится mobx-recat-form!но вы должны учитывать, что он управляет состоянием для вас автоматически.

Вы можете связать себя с onChange и соответствующим образом обновить D, E.

Например: 

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

это самый «прямой» способ справиться с этим.если вы хотите решить ее более «мобским» способом,

Сделайте что-нибудь вроде этого: 

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-реагировать-формы) для управления формами, а также с прямыми хуками (1-й пример) или наблюдать, как форма распространяет изменения на другие значения в других хранилищах.

...