reactjs - 提交时无法识别 mobx-react-form 文本字段默认值

Question

代码如下

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

表单设置如下

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

该值在文本字段中正确显示。但是当我提交表单时，它显示“必需”错误。

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

关于如何解决这个问题的任何想法？

编辑：

该值是基于国家选择的动态值。因此，您无法在初始化期间设置该值。这就是为什么我不得不采用这种方法。

Answer 1

不需要覆盖valuemobx TextField-react-form （我假设你正在使用它）不可能知道你正在做它。初始化表单时只需传递默认值，如下所示：

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])