Shadcn UI Select组件状态不更新求助（未用Zod/React-Hook-Form）

我是Shadcn UI和React新手，请问为什么branch和year状态变量的值无法更新？我没有使用zod或react-hook-form。已经咨询过ChatGPT和Gemini，但问题仍未解决，文档中使用了zod和react-hook-form，但我不想使用它们，现在非常困惑，请求帮助...

import React, { useState } from "react";
import { Button } from '../components/ui/button'
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import { Label } from "@/components/ui/label"

export default function CreateProfile() {
    const [fileName, setFileName] = useState(""); // State to store the selected file name
    const [branch, setBranch] = useState('cse'); // State to store the selected branch
    const [year, setYear] = useState('2nd'); // State to store the selected year

    const handleSubmit = async (e) => {
        e.preventDefault();
        // Add the logic to save the data to the database
        console.log({ fileName, branch, year });
    }

    return (
        <>
            <section className='bg-[#09090b] min-h-screen p-12 flex-col flex items-center justify-center'>
                <h1 className="text-4xl font-bold text-white capitalize scroll-m-20 lg:text-5xl">
                    Welcome Priyanshu! Now Create Your Profile
                </h1>

                <h4 className="mt-5 text-xl tracking-tight text-white scroll-m-20">
                    This is what viewers will see when they click on your profile through leaderboard. You can edit this information at any time.
                </h4>

                <form className="w-full max-w-4xl mt-8 sm:mt-16" onSubmit={handleSubmit}>
                    <div className='flex flex-col md:flex-row md:gap-x-6'>
                        <div className='md:w-1/2'>
                            <div className="max-w-md">
                                <div className="flex flex-col items-center justify-center px-6 py-8 border border-gray-400 border-dashed rounded-lg">
                                    <svg className="w-12 h-12 mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                                    <p className="mb-4 text-lg text-center text-gray-600">Drag & drop your resume here</p>
                                    <p className="mb-4 text-sm text-center text-gray-500">or</p>
                                    {/* Input element to select file */}
                                    <input
                                        type="file"
                                        className="hidden"
                                        id="fileInput"
                                        onChange={(e) => setFileName(e.target.files[0].name)}
                                    />
                                    <label htmlFor="fileInput" className="px-4 py-2 font-bold text-white transition duration-300 ease-in-out bg-blue-500 rounded-lg cursor-pointer hover:bg-blue-600">Browse files</label>
                                    {/* Display the selected file name */}
                                    {fileName && (
                                        <p className="mt-4 text-sm text-center text-gray-500">Selected file: {fileName}</p>
                                    )}
                                </div>
                            </div>
                        </div>
                        <div className='mt-8 md:w-1/2 md:mt-0'>
                            <div className="mb-6">
                                <Label htmlFor="branch" className="text-white">Select your branch</Label>
                                <Select id="branch" value={branch} onChange={(e) => setBranch(e.target.value)}>
                                    <SelectTrigger className="text-white">
                                        <SelectValue value="cse" placeholder="Computer science engineering" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectGroup>
                                            <SelectItem value="cse">Computer science engineering</SelectItem>
                                            <SelectItem value="etc">Electronics & telecommunication</SelectItem>
                                            <SelectItem value="mech">Mechanical Engineering</SelectItem>
                                            <SelectItem value="civil">Civil Engineering</SelectItem>
                                            <SelectItem value="elec">Electrical Engineering</SelectItem>
                                            <SelectItem value="other">Other</SelectItem>
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="mb-6">
                                <Label htmlFor="year" className="text-white">Select current year</Label>
                                <Select id="year" value={year} onChange={(e) => setYear(e.target.value)}>
                                    <SelectTrigger className="w-full text-white">
                                        <SelectValue placeholder="Second" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectGroup>
                                            <SelectItem value="1st">First</SelectItem>
                                            <SelectItem value="2nd">Second</SelectItem>
                                            <SelectItem value="3rd">Third</SelectItem>
                                            <SelectItem value="4th">Fourth</SelectItem>
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className='flex items-center justify-center mt-8 sm:mt-12'>
                                <Button>Save & proceed</Button>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </>
    )
}

解决方案 #

问题出在Shadcn UI的Select组件回调参数上——它不是原生HTML的select元素，onChange回调不会返回事件对象，而是直接返回选中的值。你用e.target.value自然取不到正确内容，导致状态无法更新。

只需要做两处修改：

1. 修改两个Select组件的onChange回调，直接接收值并更新状态：

   • 原branch的Select：

     <Select id="branch" value={branch} onChange={(e) => setBranch(e.target.value)}>
     

     改为：

     <Select id="branch" value={branch} onChange={(value) => setBranch(value)}>
     

   • 原year的Select：

     <Select id="year" value={year} onChange={(e) => setYear(e.target.value)}>
     

     改为：

     <Select id="year" value={year} onChange={(value) => setYear(value)}>
     

2. 修正branch的SelectValue，将硬编码的value="cse"改为绑定状态变量，确保选中状态正确同步：

   <SelectValue value={branch} placeholder="Computer science engineering" />
   

修改后，当你选择不同的分支或年级时，branch和year状态会正常更新，提交表单时console.log就能输出正确的值了。

内容的提问来源于stack exchange，提问作者Priyanshu Ganatra