Formik中实现onChange事件触发与组件重渲染的教程

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

// 模拟需要接收更新值的其他组件
const KPIForm = ({ initValues, pageNo }) => {
    useEffect(() => {
        console.log("KPIForm received updated initValues:", initValues);
        // 在这里可以根据initValues进行其他处理
    }, [initValues]);

    return (
        <Box mt={4} p={3} border="1px" borderColor="gray.200">
            <Heading as="h4" size="sm">KPIForm (Page {pageNo})</Heading>
            <p>Q4 Value received: {initValues.q4}</p>
            {/* 更多基于initValues的UI或逻辑 */}
        </Box>
    );
};

export default function Part4({ initialFormData, setPage }) {
    // 使用useState来管理需要共享给KPIForm的q4值
    // initialFormData应包含q4的初始值
    const [sharedQ4Value, setSharedQ4Value] = useState(initialFormData?.q4 || '');

    // Formik的初始值，确保与sharedQ4Value同步
    const formikInitialValues = {
        q4: initialFormData?.q4 || '',
        // 其他字段...
    };

    return (
        <Box bg={'white'} p="4">
            <Formik
                enableReinitialize={true} // 允许Formik在initialValues变化时重新初始化
                initialValues={formikInitialValues}
                onSubmit={(values, actions) => {
                    console.log("Form submitted:", values);
                    actions.setSubmitting(false);
                    // 提交逻辑，可能包括API调用
                }}
            >
                {(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的handleChange和value被正确绑定
                                        placeholder="Please input your answer"
                                        onChange={(e) => {
                                            // 1. 调用Formik的handleChange来更新Formik内部状态
                                            props.handleChange(e);
                                            // 2. 更新父组件的state，以便传递给其他组件
                                            setSharedQ4Value(e.target.value);
                                        }}
                                    />
                                )}
                            </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">Submit All</button>
                    </Form>
                )}
            </Formik>

            {/* 将更新后的q4值作为props传递给KPIForm */}
            <KPIForm initValues={{ q4: sharedQ4Value, q5: initialFormData?.q5 }} pageNo={4} setPage={setPage} />
        </Box>
    );
}

import React from 'react';
import { Input } from '@chakra-ui/react';
import { Field } from 'formik';

// ... (其他组件和Formik设置保持不变)

<Field name="q4" as={Input}>
    {/* Field as={Input} 会自动将Formik的field props (包括onChange, value, onBlur) 传递给Chakra Input */}
    {/* 如果需要额外的onChange逻辑，可以像前面一样覆盖它 */}
    {({ field, form, meta }) => (
        <Input
            borderRadius={0}
            id="q4"
            h="50px"
            p="1"
            {...field} // 确保Formik的handleChange和value被正确绑定
            placeholder="Please input your answer"
            onChange={(e) => {
                field.onChange(e); // 调用Formik的handleChange
                setSharedQ4Value(e.target.value); // 更新共享状态
            }}
        />
    )}
</Field>