Formik值变更未更新及禁用输入框数据获取问题求助

问题1：Formik值无法更新 #

你的value属性逻辑存在运算符优先级和逻辑错误。当前表达式ProfileData ? moment(ProfileData.BirthDate).format('DD MMMM YYYY') : '' && formik.values.formA.ValueDesc5中，&&优先级高于三元运算符，实际执行逻辑完全偏离了你“优先用ProfileData的值，无则用Formik值”的预期，导致Formik无法正确同步值。

问题2：禁用输入框无法获取值 #

HTML规范中，disabled的表单元素不会被包含在表单提交数据中，Formik也不会收集这类元素的值，这是你无法获取禁用输入框值的核心原因。

修正后的代码方案 #

方案1：改用readOnly替代disabled（推荐） #

readOnly让输入框不可编辑，但仍属于表单可提交元素，Formik能正常处理其值：

<Input
  readOnly={true}
  value={ProfileData ? moment(ProfileData.BirthDate).format('DD MMMM YYYY') : formik.values.formA.ValueDesc5}
  type="text"
  name="formA.ValueDesc5"
  onBlur={formik.handleBlur}
  onChange={formik.handleChange}
/>

方案2：保留disabled并手动同步值到Formik #

如果必须使用disabled，需要在ProfileData加载完成后，手动将值同步到Formik状态：

1. 在组件加载或ProfileData更新时调用Formik方法：

useEffect(() => {
  if (ProfileData) {
    const formattedDate = moment(ProfileData.BirthDate).format('DD MMMM YYYY');
    formik.setFieldValue('formA.ValueDesc5', formattedDate);
  }
}, [ProfileData, formik]);

2. 修正输入框的value属性，直接绑定Formik的值：

<Input
  disabled={true}
  value={formik.values.formA.ValueDesc5}
  type="text"
  name="formA.ValueDesc5"
  onBlur={formik.handleBlur}
  onChange={formik.handleChange}
/>

内容的提问来源于stack exchange，提问作者Sulthon Maulana Fathuddin