在 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 }
 />

但这样一来，即使初始值会进入输入。输入现在不可编辑。这很好理解，因为他不在状态。

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

Answer 1

输入不可编辑，因为如果你在 render 中调用这个 const vm = createViewModel(company) 那么每次都会从你的 company 创建新的 viewModel 并且你的所有字段基本上都会被重置。

您还可以将 ViewModel 存储在状态中，以便在重新渲染之间保留它的引用。

const [company, setCompany] = useState(store.companyObservable)
const [vm] = useState(createViewModel(company)) // Since you don't need to change it then you don't even need to destructure setter

Answer 2

通过使用 'computed' 解决：

//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}
/>

在 React Component 状态下实现 Mobx ViewModel

Implement Mobx ViewModel in React Component state

reactjs

mobx

mobx-react

mobx-utils