React Final Form向导表单：如何在Index.js获取当前输入字段值

嘿，既然你已经能在Wizard.js里拿到输入值，说明表单的基础逻辑是跑通的，大概率是状态传递或者上下文范围的问题。我给你梳理几个常见的坑和对应的解决办法：

1. 表单状态没从Wizard传递到Index.js #

React Final Form的表单状态默认是封装在Form组件内部的，如果你在Wizard里用useForm或FormSpy拿到了值，但没把这些状态主动传递给上层的Index.js，那Index.js自然拿不到。

解决思路：
在Wizard里用FormSpy监听表单值和当前步骤的变化，然后通过回调props把当前步骤的输入值传给Index.js：

// Wizard.js
import { FormSpy } from 'react-final-form';
import { useState } from 'react';

const Wizard = ({ onActivePageValuesUpdate, ...rest }) => {
  const [activePage, setActivePage] = useState('step1');

  // 提取当前步骤对应字段的逻辑，根据你的字段命名调整
  const getActivePageValues = (allValues) => {
    // 示例：如果字段是按step1.name、step2.email命名的
    return Object.fromEntries(
      Object.entries(allValues).filter(([key]) => key.startsWith(`${activePage}.`))
    );
  };

  return (
    <>
      <FormSpy
        onChange={({ values }) => {
          const currentStepValues = getActivePageValues(values);
          // 把当前步骤的值传给父组件Index.js
          onActivePageValuesUpdate(currentStepValues);
        }}
      />
      {/* 你的向导步骤切换、表单字段渲染逻辑 */}
    </>
  );
};

// Index.js 中使用Wizard
import { useState } from 'react';

const Index = () => {
  const [currentStepValues, setCurrentStepValues] = useState({});

  return (
    <>
      <Wizard onActivePageValuesUpdate={setCurrentStepValues} />
      {/* 这里就能直接用currentStepValues了！ */}
      <pre>{JSON.stringify(currentStepValues, null, 2)}</pre>
    </>
  );
};

2. Index.js不在表单上下文范围内 #

如果你想在Index.js里直接用useForm钩子拿表单状态，但Index.js是Wizard的父组件，或者没有被Form组件包裹，那useForm是拿不到上下文的——因为这个钩子只能在Form的子组件中使用。

解决思路：
如果Index.js是子组件但不在上下文里，就把它放到Form的内部；如果是父组件，就用上面的回调传递方法。或者用FormProvider把表单上下文传递出去：

// Wizard.js 里用FormProvider包裹内容
import { Form, FormProvider } from 'react-final-form';

const Wizard = ({ children }) => {
  return (
    <Form
      onSubmit={yourSubmitHandler}
      initialValues={yourInitialValues}
    >
      {({ form }) => (
        <FormProvider form={form}>
          {/* 你的向导步骤逻辑 */}
          {children}
        </FormProvider>
      )}
    </Form>
  );
};

// Index.js 作为Wizard的子组件，就能用useForm了
import { useForm } from 'react-final-form';

const Index = () => {
  const form = useForm();
  const { values, activePage } = form.getState(); // 假设activePage存在于表单状态中
  const currentStepValues = Object.fromEntries(
    Object.entries(values).filter(([key]) => key.startsWith(`${activePage}.`))
  );

  return <div>{/* 使用currentStepValues */}</div>;
};

3. 提取当前步骤值的逻辑出错 #

如果你的字段命名不是按步骤前缀来的，或者提取逻辑写错了，就算拿到了全表单值，也会提取出空值或错误的内容。

解决思路：
先在Wizard里打印values和activePage，确认字段名和当前步骤的对应关系，再调整提取逻辑。比如如果每个步骤的字段是独立的对象：

// 假设values是 { step1: { name: 'xxx' }, step2: { email: 'yyy' } }
const currentStepValues = values[activePage] || {};

你可以先检查下自己的代码属于哪种情况——最常见的就是第一种：没把Wizard里的状态传递给Index.js。

内容的提问来源于stack exchange，提问作者o.O