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

// 模拟的KPIForm组件，用于接收并显示来自父组件的更新值
const KPIForm = ({ dynamicValue }) => {
  useEffect(() => {
    console.log("KPIForm接收到的动态值:", dynamicValue);
  }, [dynamicValue]);

  return (
    <Box mt={4} p={4} border="1px" borderColor="gray.200">
      <Heading as="h4" size="md">KPI 表单内容</Heading>
      <p>当前来自主表单的动态值: <strong>{dynamicValue || "无"}</strong></p>
      {/* KPIForm的其他逻辑，可以使用dynamicValue进行处理 */}
    </Box>
  );
};

// 主表单组件，包含Formik表单和KPIForm
export default function Part4() {
  // 使用useState在父组件中管理需要共享的状态
  const [q4Value, setQ4Value] = useState("");

  const initialFormValues = {
    q4: "",
    q5: {
      a1: ['', { value: 0, unit: '%' }, { value: 0, unit: '%' }, { value: 0, unit: '%' }, { value: 0, unit: '%' }],
      a2: ['', { value: 0, unit: '($)' }, { value: 0, unit: '($)' }, { value: 0, unit: '($)' }, { value: 0, unit: '($)' }],
    }
  };

  return (
    <Box bg={'white'} p="4">
      <Formik
        initialValues={initialFormValues}
        // enableReinitialize={true} // 如果initialValues是动态的，可能需要，但请谨慎使用
        onSubmit={(values, actions) => {
          console.log("Formik提交值:", values);
          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 }) => (
                  <Input
                    borderRadius={0}
                    id="q4"
                    h="50px"
                    p="1"
                    {...field} // 确保Formik的props绑定到输入框
                    onChange={(e) => {
                      props.handleChange(e); // 调用Formik的handleChange更新内部状态
                      setQ4Value(e.target.value); // 更新父组件的useState状态
                      console.log("Input onChange triggered:", e.target.value);
                    }}
                    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>

      {/* 将父组件的状态作为props传递给KPIForm */}
      <KPIForm dynamicValue={q4Value} />
    </Box>
  );
}