在Formik中正确管理输入状态：避免useState与表单提交冲突

const [day, setDay] = useState("初始日期");

<Formik initialValues={{ day: day, /* ... */ }}>
    {/* ... */}
    <Field name="day" value={day} />
</Formik>

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

const AppointmentBookingForm = () => {
    // handleFormSubmit 函数接收 Formik 内部管理的所有表单值
    const handleFormSubmit = async (values) => {
        console.log("提交的表单值:", values);
        // 在这里执行实际的表单提交逻辑，例如发送到API
        // fetch("http://localhost:5000/api/appointment", {
        //     method: "POST",
        //     body: JSON.stringify(values), // 注意：通常需要将JS对象转换为JSON字符串
        //     headers: {
        //         "Content-Type": "application/json",
        //         // Authorization: "Bearer " + token, // 如果需要认证
        //     },
        // })
        // .then(res => {
        //     if (!res.ok) throw new Error('Network response was not ok.');
        //     return res.json();
        // })
        // .then(data => console.log('预约成功:', data))
        // .catch(err => console.error('预约失败:', err));
    };

    return (
        <Formik
            initialValues={{
                firstname: "",
                lastname: "",
                email: "",
                date: "", // 存储预约的具体时间，例如 "周一 15:00"
                day: "未选择日期", // 存储预约日期，由单选按钮更新
            }}
            onSubmit={handleFormSubmit}
        >
            {/* Formik的render prop提供了一系列有用的函数和当前表单状态 */}
            {({ setFieldValue, values }) => (
                <Form className="appointment-form">
                    <h2>预约信息</h2>

                    <div className="form-group">
                        <label htmlFor="firstname">名:</label>
                        <Field id="firstname" name="firstname" type="text" placeholder="请输入名" />
                    </div>

                    <div className="form-group">
                        <label htmlFor="lastname">姓:</label>
                        <Field id="lastname" name="lastname" type="text" placeholder="请输入姓" />
                    </div>

                    <div className="form-group">
                        <label htmlFor="email">邮箱:</label>
                        <Field id="email" name="email" type="email" placeholder="请输入邮箱" />
                    </div>

                    <h3>选择预约时间</h3>
                    <div role="group" aria-labelledby="radio-group-label" className="radio-group">
                        <span id="radio-group-label" style={{ display: 'none' }}>选择预约时间</span>
                        <label className="radio-option">
                            <Field
                                type="radio"
                                name="date"
                                value="周一 15:00"
                                // 在 onClick 事件中，使用 setFieldValue 更新 Formik 内部状态
                                onClick={() => {
                                    setFieldValue("day", "周一"); // 更新 'day' 字段
                                    setFieldValue("date", "周一 15:00"); // 确保 'date' 字段也更新
                                }}
                            />
                            周一 下午3点
                        </label>
                        <label className="radio-option">
                            <Field
                                type="radio"
                                name="date"
                                value="周二 10:00"
                                onClick={() => {
                                    setFieldValue("day", "周二"); // 更新 'day' 字段
                                    setFieldValue("date", "周二 10:00"); // 确保 'date' 字段也更新
                                }}
                            />
                            周二 上午10点
                        </label>
                        <label className="radio-option">
                            <Field
                                type="radio"
                                name="date"
                                value="周三 09:00"
                                onClick={() => {
                                    setFieldValue("day", "周三");
                                    setFieldValue("date", "周三 09:00");
                                }}
                            />
                            周三 上午9点
                        </label>
                        {/* 可以添加更多时间选项 */}
                    </div>

                    <div className="form-group">
                        <label htmlFor="day">预约日期 (自动填充):</label>
                        {/* 这个输入框的值完全由 Formik 内部状态控制 */}
                        <Field
                            id="day"
                            name="day"
                            type="text"
                            readOnly // 通常这种由系统填充的字段会设置为只读
                            className="read-only-field"
                        />
                        {/* 调试用途：显示 Formik 内部当前 day 字段的值 */}
                        <p className="debug-info">当前Formik中的Day值: <strong>{values.day}</strong></p>
                    </div>

                    <button type="submit" className="submit-button">提交预约</button>
                </Form>
            )}
        </Formik>
    );
};

export default AppointmentBookingForm;