我創(chuàng)建了一個定制的& quot選擇& quot組件，但是我在將它與Formik庫集成以進行表單驗證時遇到了問題。盡管我做了努力，選定的選項沒有更新。我如何排除故障并解決此問題？

"use client"
import {FC, useState} from 'react';

interface SelectOption {
    value: string;
    label: string;
}

interface SelectProps {
    label: string;
    options: SelectOption[];
    value?: string;
    onChange: (value: string) => void;
    className?: string;
}

const Select: FC<SelectProps> = ({ label, options, value, onChange, className }) => {
    const [isOpen, setIsOpen] = useState(false);

    const handleOptionClick = (optionValue: string) => {
        setIsOpen(false);
        onChange(optionValue);
    };

    const selectedOption = options.find((option) => option.value === value);

    return (
        <div className={"relative text-left cursor-pointer " + className}>
            <label
                className={`${
                    selectedOption?.value ? 'text-sm left-4 -top-3 px-1 bg-white z-10' : 'text-base top-2/4 transform -translate-y-2/4'
                } 
                ${isOpen ? 'text-cyan-500' : ''}
                left-4 absolute pointer-events-none transition-all duration-200`}
                htmlFor="select"
            >
                {label}
            </label>
            <div className="relative">
                <div
                    className={`border-2 rounded-lg w-full h-14 px-4 py-4 focus:border-red-400 ${
                        isOpen ? 'border-cyan-500' : ''
                    }`}
                    onClick={() => setIsOpen(!isOpen)}
                >
                    {selectedOption?.label}
                </div>
                {isOpen && (
                    <div className="absolute top-full left-0 right-0 border rounded-md bg-white shadow-lg select-none z-10">
                        {options.map((option) => (
                            <div
                                key={option.value}
                                className={`p-2 cursor-pointer hover:bg-gray-100`}
                                onClick={() => handleOptionClick(option.value)}
                            >
                                {option.label}
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};

export default Select;

注冊表中還有幾個字段，但為了方便起見，我已經(jīng)把它們刪除了。

"use client"
import {Button, FloatingInput, ProgressBar, Radio, Select} from "../../ui";
import {useState} from "react";
import {useFormik} from "formik";
import * as Yup from "yup";

const SignUpForm = () => {
    const countryOptions = [
        {
            value: "US",
            label: "United States"
        }, {
            value: "CA",
            label: "Canada"
        }, {
            value: "FR",
            label: "France"
        }, {
            value: "DE",
            label: "Germany"
        }
    ]

    const formikAddress = useFormik({
        initialValues: {
            country: 'US',
        },
        validationSchema: Yup.object({
            country: Yup
                .mixed()
                .oneOf(['US', 'CA', 'FR', 'DE'])
                .required('Country is required'),
        }),
        onSubmit: async (values) => {
            console.log(values)
        }
    });

    return (
        <>
            <form onSubmit={formikAddress.handleSubmit} className={"space-y-6"}>
                <Select
                    label="Country: *"
                    options={countryOptions}
                    value={formikAddress.values.country}
                    onChange={formikAddress.handleChange}
                />
                <Button type={"submit"} className={"w-full"}>Weiter</Button>
            </form>
        </>
    );
};

export default SignUpForm;

問題是您正在向handleChange傳遞一個字符串值，該值接受ChangeEvent。

一種解決方案是將value和handleChange綁定到一個隱藏的輸入，并通過輸入的onChange事件處理程序中的內(nèi)部狀態(tài)來處理顯示的值

編輯:

否則，您可以傳遞setFieldValue而不是handleChange

const handleOptionClick = (optionValue: string) => {
    setIsOpen(false);
    // get fieldName from props
    setFieldValue(fieldName, optionValue);
};