React Tcomb Form无法获取自定义工厂中DateInput组件的值

我之前踩过类似的坑，tcomb-form对自定义组件的双向绑定有特定要求，咱们一步步来搞定这个问题：

核心原因分析 #

你遇到的undefined问题主要来自两个点：

1. 类型不匹配：你声明的字段类型是t.maybe(t.String)，但Blueprint的DateInput返回的是Date对象，tcomb-form无法自动完成类型转换，导致值无法被正确追踪。
2. 自定义工厂未同步状态：你的自定义工厂组件没有正确对接tcomb-form的value和onChange机制，导致表单无法感知到DateInput的数值变化。

具体解决步骤 #

1. 调整字段类型（二选一） #

根据你的业务需求选择合适的字段类型：

• 如果需要存储日期字符串（比如ISO格式），保留t.maybe(t.String)，后续在组件里做转换；
• 如果更倾向于直接操作Date对象，把类型改成t.maybe(t.Date)，这样更贴合DateInput的原生输出。

示例代码（改成Date类型的情况）：

const Type = t.struct({
  invoiceDate: t.maybe(t.Date),
});

2. 重构自定义工厂组件 #

确保你的DateInputField正确接收tcomb-form传递的value和onChange，并和Blueprint的DateInput做好对接：

// 假设是类组件的方法，函数组件同理
DateInputField = ({ value, onChange, ...restProps }) => {
  // 处理日期变化，把Date对象同步给tcomb-form
  const handleDateChange = (selectedDate) => {
    // 如果字段是String类型，这里改成selectedDate?.toISOString() || null
    onChange(selectedDate);
  };

  // 把tcomb-form传递的value（可能是Date或字符串）转成DateInput需要的格式
  const inputValue = value ? new Date(value) : null;

  return (
    <DateInput
      value={inputValue}
      onChange={handleDateChange}
      {...restProps}
    />
  );
};

3. 正确配置formOptions #

确保工厂组件被正确关联到字段：

const formOptions = {
  fields: {
    invoiceDate: {
      factory: this.DateInputField,
      // 其他你需要的配置，比如label、placeholder等
    }
  }
};

额外注意事项 #

• 如果你坚持用t.String类型，一定要在handleDateChange里把Date对象转换成字符串（比如ISO格式），否则tcomb-form会因为类型校验失败而返回undefined；
• 不要忽略tcomb-form传递的value参数，必须把它回传给DateInput，这样表单的初始值和重置操作才能正常工作。

内容的提问来源于stack exchange，提问作者Ha Quynh Nguyen