如何将 mobx-react-form 与 mobx-state-tree store 绑定
How to bind mobx-react-form with 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 绑定到商店中的相应值,以便它们在更改时更新?
嗯,
首先,
我想让您注意,您正在尝试连接 2 个不同的状态管理器。
我非常喜欢mobx-recat-form!但你应该考虑到它
自动为您管理状态。
你可以将自己绑定到onChange,相应地更新D,E。
例如:
<input onChange={e => {
form.$('B').set(e.target.value);
// handle D,E according to value
}} />
这是最"direct"的处理方式。
如果您想以更多"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)来控制
表单,并使用直接挂钩(第一个示例)或通过观察表单将更改传播到其他商店中的其他值。
我有一个包含三个字段 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 绑定到商店中的相应值,以便它们在更改时更新?
嗯,
首先, 我想让您注意,您正在尝试连接 2 个不同的状态管理器。
我非常喜欢mobx-recat-form!但你应该考虑到它 自动为您管理状态。
你可以将自己绑定到onChange,相应地更新D,E。
例如:
<input onChange={e => {
form.$('B').set(e.target.value);
// handle D,E according to value
}} />
这是最"direct"的处理方式。 如果您想以更多"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)来控制 表单,并使用直接挂钩(第一个示例)或通过观察表单将更改传播到其他商店中的其他值。