mobx-react form textfield默认值在提交时不被识别

Question

代码如下

 <TextField {...form.$("phone.countryCode").bind()} value={222} />

表单设置如下

{
        name: "phone",
        fields: [
          {
            name: "countryCode",
            label: "Country Code:",
            bindings: "TextField",
            placeholder: "+",
            rules: "required",
          }
       ]
}

该值在textfield中正确显示。但当我提交表单时，它会显示“必需”错误。

我假设当我们像这样设置值时不会触发field.input.onChange，因此mobx字段不会用该值进行更新。

知道怎么解决这个问题吗？

编辑：

这个价值是一个基于国家选择的动态价值。因此，您不能在初始化期间设置值。这就是为什么我必须采取这种方法。

Answer 1

不需要在value上覆盖TextField，mobx-react(我假设您正在使用它)不可能知道您正在使用它。初始化表单时只需传递默认值，如下所示：

const fields = [
  {
    name: "countryCode",
    label: "Country Code:",
    bindings: "TextField",
    placeholder: "+",
    rules: "required",
    value: 'YOUR_DEFAULT_VALUE_HERE'
  }
]

new MobxReactForm({ fields });

如果该值依赖于其他值，则可以使用useEffect，例如：

useEffect(() => {
  // set countryCode value manually with needed value
  FormModel.$("countryCode").set(country.code);
// Add needed deps
}, [country])