将 UI 组件双向绑定到可观察量以减少呈现的最佳方法是什么?

Question

我们正在使用 mobx 和 react 构建一个 MVVM 应用程序。目前，我们最好的选择是创建与此简化示例类似的视图模型和 UI 组件。

// LoginModel.ts
export class LoginModel {
@observable
public userName: string;

@observable
public password: string;
}
// LoginView.tsx
@observer
export class LoginView extends React.Component<LoginViewProps> {
public render(): JSX.Element {
return (
<div>
<input type="text" value={this.model.userName} onChange={e => this.model.userName = e.value} />        
<input type="password" value={this.model.password} onChange={e => this.model.password= e.value} />
</div>
);
}
}

AFAIK 在此实现中，组件将在userName或password更改时完全重新呈现。

我想要实现的是拥有我们自己的自定义TextInput组件，该组件将负责呈现布局、样式、接收用户输入，以及根据模型状态显示验证错误等。我现在看到两个选项。

1. 在自定义组件中公开value、onChange和例如error，并像上面的例子一样使用它。这种情况的问题是相同的，单个可观察属性中的每个更改都会重新呈现整个"表单"组件。这是因为我没有取消引用TextInput组件中的可观察量，而是在LoginView中取消引用。
2. 暴露类似model: any和field: string的东西，并在里面使用model[field]。这样，我将在TextInput内进行取消引用，它可以正常工作，但是我会丢失一些强大的类型和通用性。

一些注意事项：

• 第一次运行时，我故意不喜欢使用像react-forms这样的库，等等。
• 另外，如果有人发现它，我故意不喜欢使用Provider和@inject模式，我喜欢明确。

谁能给我一些关于这种情况的想法和建议？

Answer 1

mobx 有一个很棒的表单库，它使用 https://formstate.github.io 非常相似的技术，您可能可以从中复制此模式。

Answer 2

您可以使用对象而不是纯字符串。

interface Str{
value:string
}

然后，您可以在输入组件中使用.value。