没有 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>
  );
});