Redux Form问题：Input始终处于touched: false状态

看起来你遇到的核心问题是Final Form无法追踪输入字段的交互状态——这大概率是因为自定义输入组件没有正确接收并使用Field传递的核心props导致的。我来一步步帮你排查修复：

首先，先明确问题根源 #

Final Form依赖Field组件传递的input对象（包含onChange、onBlur、value等方法）来追踪字段的触摸和值变化。如果你的自定义输入组件没有绑定这些方法，Final Form就永远不知道用户是否触摸了输入框、输入了什么内容，自然会一直保持touched: false和初始的error: "Required"状态。

修复步骤+代码示例 #

1. 修正自定义输入组件（以你的NameInput为例） #

你需要让组件接收Field传递的input和meta props，并把input的属性绑定到内部的input元素上：

import React from 'react';

// 接收Field传递的input和meta props
const NameInput = ({ input, meta }) => {
  return (
    <div className="form-group">
      {/* 把input对象的所有属性展开到原生input上 */}
      <input 
        {...input} 
        type="text" 
        placeholder="请输入姓名"
        className={meta.touched && meta.error ? 'input-error' : ''}
      />
      {/* 只有当字段被触摸且有错误时，才显示错误提示 */}
      {meta.touched && meta.error && (
        <span className="error-message">{meta.error}</span>
      )}
    </div>
  );
};

export default NameInput;

2. 正确使用Field组件 #

确保Field组件设置了唯一的name属性，并且传递了验证函数数组，同时把自定义组件传给component属性：

import { Form, Field } from 'react-final-form';
import { required } from './your-validation-file';
import NameInput from './NameInput';

const UserForm = () => {
  const handleSubmit = (formValues) => {
    console.log('表单提交值:', formValues);
    // 这里处理提交逻辑
  };

  return (
    <Form
      onSubmit={handleSubmit}
      render={({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          {/* 正确配置Field：name + validate + component */}
          <Field 
            name="userName" 
            validate={[required]} 
            component={NameInput} 
          />
          
          <button type="submit">提交表单</button>
        </form>
      )}
    />
  );
};

export default UserForm;

3. 验证函数保持不变（你的写法是对的） #

export const required = value => (value ? undefined : 'Required');

关键注意点 #

• Field必须要有name属性：这是Final Form识别字段的唯一标识，不能省略。
• 不要忽略onBlur：touched状态是通过onBlur事件触发的，如果你手动绑定props，一定要把input.onBlur也加上，不能只绑onChange和value。
• 错误提示的时机：meta.touched确保只有用户触摸过字段后才显示错误，避免页面加载就出现一堆红色提示，提升用户体验。

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