Как связать mobx-react-form с mobx-state-tree store

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


mobx mobx-react mobx-state-tree mobx-react-form
person tea    schedule 01.12.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо,

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

person Mazki516    schedule 01.12.2018
comment
Большое спасибо @ Mazki516 :) Оба варианта сработали хорошо, и теперь мне интересно, правильно ли я принимаю решение использовать двух государственных менеджеров вместе. Теперь я переоцениваю «почему»? - person tea; 02.12.2018
comment
Что ж, не торопись. Формы мобов отлично подходят для работы с формами. Не состояние приложения. И дерево состояний minx отлично подходит для состояния пользовательского интерфейса (индикаторы загрузки, маршрут, конфигурация ...) - person Mazki516; 03.12.2018
comment
Так что их совместное использование может быть в некотором роде полезным. Попытайтесь найти, где они оба спасли вас от написания лишнего шаблона. Попробуйте повторить эту последовательность ... - person Mazki516; 03.12.2018