如何确保Formik表单的onChange事件触发并实现组件间实时数据同步

import React, { useState, useEffect } from "react";
import { Formik, Form, Field } from "formik";
import { Box, Input, Button, Heading } from "@chakra-ui/react"; // 假设使用Chakra UI

// 模拟一个需要接收父组件实时数据的子组件
const KPIForm = ({ currentQ4Value, pageNo }) => {
  useEffect(() => {
    console.log(`KPIForm 接收到 q4 的最新值: ${currentQ4Value}`);
    // 在这里可以使用 currentQ4Value 进行其他处理
  }, [currentQ4Value]);

  return (
    <Box p="4" border="1px solid #ccc" mt="4">
      <Heading as="h4" size="md">KPIForm (子组件)</Heading>
      <p>当前 q4 值: {currentQ4Value || "未输入"}</p>
      {/* 可以在这里根据 currentQ4Value 渲染其他内容 */}
    </Box>
  );
};

// 主表单组件
export default function Part4({ values, setPage }) {
  // 定义一个useState来存储q4的实时值，用于传递给其他组件
  const [q4LiveValue, setQ4LiveValue] = useState('');

  // 初始值可以从外部传入，或者在这里定义
  const initialFormikValues = {
    q4: values?.q4?.answers?.[0] || '',
    // ... 其他 Formik 字段的初始值
  };

  // 在组件挂载时，如果 initialFormikValues.q4 有值，同步到 q4LiveValue
  useEffect(() => {
    if (initialFormikValues.q4) {
      setQ4LiveValue(initialFormikValues.q4);
    }
  }, []); // 仅在组件挂载时执行一次

  return (
    <Box bg={'white'} p="4">
      <Formik
        initialValues={initialFormikValues}
        enableReinitialize={true} // 如果 initialValues 会动态变化，可以启用
        onSubmit={(formikValues, actions) => {
          console.log("Formik 提交的值:", formikValues);
          // 提交逻辑
          actions.setSubmitting(false);
        }}
      >
        {(props) => (
          <Form>
            <Heading as="h3" size={'sm'} paddingBottom="5">
              4. Of all your PERSONAL priorities, what do you want to achieve most in the next 90 days?
            </Heading>
            <Box mb={10}>
              <Field name="q4">
                {({ field, form, meta }) => (
                  <Input
                    borderRadius={0}
                    id="q4"
                    h="50px"
                    p="1"
                    // 关键：同时调用 Formik 的 handleChange 和我们自定义的 setQ4LiveValue
                    onChange={(e) => {
                      field.onChange(e); // 调用 Formik 提供的 handleChange
                      setQ4LiveValue(e.target.value); // 更新父组件的 useState
                      console.log("Input onChange triggered:", e.target.value);
                    }}
                    {...field} // 确保 Formik 的其他属性（如 value, onBlur）也被传递
                    placeholder="Please input your answer"
                  />
                )}
              </Field>
            </Box>
            <br />
            <Heading as="h3" size={'sm'} paddingBottom="5">
              5. Now think about how to measure this. What is the best result you think deserves a reward remembering, anything greater than 80% should be rewarded.
            </Heading>
            <Button type="submit" colorScheme="blue" mt="4">提交表单</Button>
          </Form>
        )}
      </Formik>

      {/* 将 q4LiveValue 传递给 KPIForm 组件 */}
      <KPIForm currentQ4Value={q4LiveValue} pageNo={4} setPage={setPage} />
    </Box>
  );
}