mobx-react-form TextField设置value提交时未识别报required错误如何解决

问题根因 #

你手动为TextField添加的value属性会覆盖form.$("phone.countryCode").bind()返回的内置value字段，仅修改了UI层的显示值，没有同步更新MobX React Form内部维护的字段状态，表单实例中phone.countryCode的存储值仍为初始空值，因此提交时会触发required校验失败，你的推测完全正确。

修复方案 #

不要通过组件属性直接覆盖value，而是调用MobX React Form暴露的字段更新方法同步修改内部状态，具体操作如下：

1. 在国家选择的触发回调中，调用字段的set方法更新值，示例代码：

// 国家选择组件的选中回调函数
const handleCountryChange = (selectedCountry) => {
  // 直接更新表单字段的内部状态
  form.$("phone.countryCode").set(selectedCountry.countryCode);
}

2. 移除TextField组件上手动添加的value属性，直接使用bind返回的封装属性即可：

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

补充说明 #

form.$(fieldPath).bind()方法已经内置封装了value、onChange、onBlur等表单交互需要的核心属性，无特殊需求不要手动覆盖这些属性，避免出现UI与表单内部状态不同步的问题。

内容的提问来源于stack exchange，提问作者prajeesh