reactjs - 在 React Component 状态下实现 Mobx ViewModel

Question

我想在 React 的功能组件中使用 Mobx ViewModel（来自 mobx-utils）。好吧，在这种情况下，我的模型是一个状态。（例如 - 下一行的公司）：

const [company, setCompany] = useState(store.companyObservable)

据此，视图模型的初始值将如下所示：

const vm = createViewModel(company);

它在模板中的使用将如下所示：

 <Input        
   value={vm.name}
   onChange={e => vm.name = e.target.value }
 />

但是通过这种方式，即使初始值会进入输入。输入现在不可编辑。这是可以理解的，因为他不在状态。

那么，我怎样才能以正确的方式实现这个东西呢？

标签： reactjsmobxmobx-reactmobx-utils

Answer 1

通过像这样使用“计算”​​解决：

//store
@observable
companyDetails: ICompanyDetails = { id: 0 }

@computed
get companyDetailsViewModel() {
    return createViewModel(this.companyDetails)
}

//component
 const vm = companyStore.companyDetailsViewModel

<Input
   value={vm.name}
   onChange={e => vm.name = e.target.value}
/>