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

不需要覆盖value在 TextField , mobx-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])