掌握Formik：使用setFieldValue动态更新表单字段值

import React, { useState } from 'react';
import { Formik, Form, Field, useFormikContext } from 'formik';

function MyForm() {
    // 1. 使用 useState 管理 'day' 字段的状态
    const [day, setDay] = useState("Gün"); // "Gün" 意为“天”

    // 2. Formik 的初始值包含 useState 管理的 'day'
    const initialValues = {
        firstname: "",
        lastname: "",
        email: "",
        date: "",
        day: day, // 这里将 useState 的 'day' 作为初始值
    };

    const handleFormSubmit = async (values) => {
        console.log("提交的表单值:", values);
        // 期望 values.day 是更新后的值，但实际可能仍是 "Gün"
    };

    return (
        <Formik
            onSubmit={handleFormSubmit}
            initialValues={initialValues}
        >
            {({ formik }) => ( // 或者使用 useFormikContext
                <Form>
                    {/* 其他表单字段... */}

                    {/* 3. 单选按钮，点击时更新 useState 的 'day' */}
                    <Field
                        type="radio"
                        name="date"
                        value="monPm3Time" // 示例值
                        onClick={() => {
                            setDay("Pazartesi"); // "Pazartesi" 意为“星期一”
                            // 这里只更新了 React 组件的 state，没有直接通知 Formik
                        }}
                    />
                    <label>星期一 下午3点</label>

                    {/* 4. 'day' 输入框，其 value 绑定到 useState 的 'day' */}
                    <Field
                        id="day"
                        name="day"
                        value={day} // UI 上会显示最新的 'day' 状态
                    />
                    <label htmlFor="day">预约日期</label>

                    <button type="submit">提交</button>
                </Form>
            )}
        </Formik>
    );
}

export default MyForm;

// 移除：const [day, setDay] = useState("Gün");

const initialValues = {
    firstname: "",
    lastname: "",
    email: "",
    date: "",
    day: "未选择", // 提供一个默认值
};

// 在 Formik 的 render prop 或子组件中获取 setFieldValue
// 假设我们通过 useFormikContext 获取 setFieldValue
function RadioButtonComponent() {
    const { setFieldValue } = useFormikContext();

    return (
        <Field
            type="radio"
            name="date"
            value="monPm3Time"
            onClick={() => {
                setFieldValue('day', 'Pazartesi'); // 直接更新 Formik 内部的 'day' 字段
            }}
        />
    );
}

<Field
    id="day"
    name="day"
    // value 属性将由 Formik 内部管理，无需显式绑定到外部状态
/>

import React from 'react';
import { Formik, Form, Field, useFormikContext } from 'formik';

// 一个独立的组件来处理单选按钮和日期的设置
function AppointmentScheduler() {
    const { setFieldValue, values } = useFormikContext();

    const handleRadioClick = (selectedTime, selectedDay) => {
        setFieldValue('date', selectedTime); // 更新预约时间
        setFieldValue('day', selectedDay);   // 更新预约日期
    };

    return (
        <div>
            <h3>选择预约时间：</h3>
            <div>
                <Field
                    type="radio"
                    name="date"
                    id="monPm3Time"
                    value="monPm3Time"
                    checked={values.date === "monPm3Time"} // 确保单选按钮的选中状态正确
                    onClick={() => handleRadioClick("monPm3Time", "Pazartesi")}
                />
                <label htmlFor="monPm3Time">星期一 下午3点</label>
            </div>
            <div>
                <Field
                    type="radio"
                    name="date"
                    id="tueAm10Time"
                    value="tueAm10Time"
                    checked={values.date === "tueAm10Time"}
                    onClick={() => handleRadioClick("tueAm10Time", "Salı")}
                />
                <label htmlFor="tueAm10Time">星期二 上午10点</label>
            </div>

            <h3>预约日期：</h3>
            {/* 'day' 输入框，其值由 Formik 内部状态管理 */}
            <Field
                id="day"
                name="day"
                readOnly // 通常这种自动设置的字段会设置为只读
                placeholder="请选择预约时间以设置日期"
            />
        </div>
    );
}

function MyForm() {
    const initialValues = {
        firstname: "",
        lastname: "",
        email: "",
        date: "",
        day: "未选择", // 初始显示值
    };

    const handleFormSubmit = async (values) => {
        console.log("提交的表单值:", values);
        // 此时 values.day 将是 "Pazartesi" 或 "Salı"，取决于用户的选择
        alert(`表单已提交！预约日期: ${values.day}, 预约时间: ${values.date}`);
        // 实际的 fetch 请求可以在这里进行
    };

    return (
        <Formik
            onSubmit={handleFormSubmit}
            initialValues={initialValues}
            enableReinitialize={true} // 如果 initialValues 可能在组件生命周期中改变，考虑使用此属性
        >
            <Form style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxWidth: '400px', margin: '20px auto', padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
                <label htmlFor="firstname">名:</label>
                <Field id="firstname" name="firstname" />

                <label htmlFor="lastname">姓:</label>
                <Field id="lastname" name="lastname" />

                <label htmlFor="email">邮箱:</label>
                <Field id="email" name="email" type="email" />

                <AppointmentScheduler /> {/* 使用子组件来管理预约逻辑 */}

                <button type="submit" style={{ padding: '10px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>提交预约</button>
            </Form>
        </Formik>
    );
}

export default MyForm;