将mobx反应式物体作为支柱传递

Question

我试图将mobx-react-form对象作为支柱传递给我创建的函数组件。问题是，当我像调用<NameEditor form={ newFolderForm }/>那样调用组件时，我确实在NameEditor组件中获得了表单参数，但它不允许我“编辑”字段。这就像字段是不可编辑的，但是当我调用像{ NameEditor({ form: newFolderForm }) }这样的组件时，它工作得非常好，我遗漏了什么？在功能组件中，这两种方式不应该是相同的吗？

编辑:下面是我获取表单的方法

const NameEditor = ({ form }) => (
 <form onSubmit={ form.onSubmit }>
  <input { ...form.$('name').bind() }/>
  <p>{ form.$('name').error }</p>
  <button>Save</button>
 </form>
)

谢谢

Answer 1

确保您在函数组件上使用了observer()，从您展示的代码中，我认为您错过了这个部分。

const NameEditor = observer(({ form }) => (
 <form onSubmit={ form.onSubmit }>
  <input { ...form.$('name').bind() }/>
  <p>{ form.$('name').error }</p>
  <button>Save</button>
 </form>
))

https://mobx.js.org/refguide/observer-component.html阅读了它如何使用无状态函数组件。