如何解决没有 useState 的 MobxStateTree?
谁能给我解释一下如何在mobx中制作模型
const Listsstore = types.model('Lists',{
lists: types.array(types.model('List',{
title: '',desc: '',}))
})
现在我想在我的 React 组件中调用这个数组并在列表中添加新列表,但我还想在模型中保存当前列表的输入数据
例如:
const { title,desc } = useRoot.Listsstore
<input type='text' value={title} />
<input type='text' value={desc} />
现在为了从输入中保存值,我保存在组件中的 useState 中,然后将其发送到数组,但我想直接在 mobx 中保存状态
我现在如何在组件中做到这一点
const { sendToList } = useRoot.Listsstore
const [title,setTitle] = useState('')
const [desc,setDesc] = useState('')
<input type='text' value={title} onChange=(event => setTitle(event.target.value)) />
<input type='text' value={desc} onChange=(event => setDesc(event.target.value)/>
<button onClick=(() => sendToList({
title,desc
}) >
Send
</button>
P.S.:抱歉语法使用翻译
解决方法
您可以将嵌套的 List
模型分解为一个单独的变量并向其添加 actions
以更改 title
和 desc
并直接在 React 中使用这些操作组件。
示例
const List = types
.model("List",{
title: "",desc: ""
})
.actions((self) => ({
setTitle(title) {
self.title = title;
},setDesc(desc) {
self.desc = desc;
}
}));
const ListStore = types.model("Lists",{
lists: types.array(List)
});
const listStore = ListStore.create({
lists: [
{ title: "foo",desc: "bar" },{ title: "baz",desc: "quz" }
]
});
export default observer(function App() {
return (
<div>
{listStore.lists.map((list,i) => (
<div key={i}>
<input
type="text"
value={list.title}
onChange={(event) => list.setTitle(event.target.value)}
/>
<input
type="text"
value={list.desc}
onChange={(event) => list.setDesc(event.target.value)}
/>
</div>
))}
</div>
);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。