如何为MUI TextField注册React Final Form并触发touched状态？

要实现普通MUI TextField触发onChange时，被React Final Form标记为touched状态，核心是调用React Final Form提供的touch方法，和字段值更新操作配合执行。下面提供两种可行的实现方式：

方式一：通过Form的render prop传递方法 #

直接从Form组件的render回调中拿到change（更新字段值）和touch（标记触碰）方法，传递给自定义组件后在TextField的onChange中调用：

父组件代码 #

import { Form } from 'react-final-form';

function ParentForm() {
  const handleSubmit = (values) => {
    console.log('提交的值:', values);
  };

  return (
    <Form
      onSubmit={handleSubmit}
      initialValues={{ hello: '' }}
      render={({ handleSubmit, change, touch }) => (
        <form onSubmit={handleSubmit}>
          <MyComponent name="hello" change={change} touch={touch} />
          <button type="submit">提交表单</button>
        </form>
      )}
    />
  );
}

自定义组件MyComponent代码 #

import TextField from '@mui/material/TextField';

function MyComponent({ name, change, touch }) {
  const handleTextFieldChange = (e) => {
    // 先更新字段的值
    change(name, e.target.value);
    // 标记该字段为已触碰
    touch(name);
  };

  return (
    <TextField
      name={name}
      onChange={handleTextFieldChange}
      label="测试字段"
      variant="outlined"
    />
  );
}

方式二：使用React Final Form的useField和useForm钩子 #

这种方式更贴合React Final Form的组件封装习惯，无需手动传递方法，直接在组件内部获取表单操作能力：

import TextField from '@mui/material/TextField';
import { useField, useForm } from 'react-final-form';

function MyComponent({ name }) {
  // 获取字段的input（值、onChange等）和meta（touched、error等）状态
  const { input, meta } = useField(name);
  // 获取表单实例，用于调用touch方法
  const form = useForm();

  const handleChange = (e) => {
    // 执行默认的字段值更新
    input.onChange(e);
    // 标记字段为已触碰
    form.touch(name);
  };

  return (
    <TextField
      {...input}
      onChange={handleChange}
      label="测试字段"
      variant="outlined"
      // 利用meta状态显示错误提示（如果有）
      error={meta.touched && meta.error}
      helperText={meta.touched && meta.error}
    />
  );
}

说明 #

• React Final Form默认会在字段onBlur时标记为touched，如果需要在onChange时触发，必须显式调用touch方法。
• 第二种方式中，useField能直接获取字段的状态（如是否已触碰、是否有错误），方便结合MUI的错误提示样式使用。

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