React Final Form集成DatePicker时如何显示字段验证错误信息？

你的问题出在自定义的DatePickerAdapter没有接收并处理React Final Form传递的错误状态属性。React Final Form的Field组件会向自定义组件传入meta对象（包含错误、字段是否被触碰等状态），但你的适配器只解构了input对象，完全没处理错误相关的逻辑，导致校验失败时无法渲染错误提示。

修改后的DatePickerAdapter代码 #

const DatePickerAdapter = ({ 
  input: { onChange, value }, 
  meta: { error, touched }, 
  ...rest 
}) => (
  <div>
    <DatePicker
      selected={value}
      onChange={(date) => onChange(date)}
      {...rest}
    />
    {/* 仅当字段被用户操作过且存在错误时，显示错误提示 */}
    {touched && error && <span style={{ color: 'red', marginTop: '4px', display: 'block' }}>{error}</span>}
  </div>
);

确保校验规则返回正确的错误文本 #

比如你的required校验函数需要明确返回错误信息，而不是简单的布尔值：

const required = (value) => value ? undefined : '日期不能为空';

关键说明 #

• React Final Form的Field组件会给自定义component传递三个核心参数：input（包含值和变更回调）、meta（包含错误状态、触碰状态等）、以及你传入的其他props
• meta.touched用来判断用户是否操作过该字段，避免页面加载时就显示错误提示
• meta.error存储校验失败后的提示文本，需要你在适配器里手动渲染出来

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