Next.js中NextUI Select组件获取选中值返回索引的问题求助

你的代码核心问题是误解了NextUI Select组件onChange回调的参数类型：它不返回DOM事件对象，而是直接返回选中的选项值。你当前用e.target.value的写法，实际上是在尝试访问一个字符串的target属性（这会返回undefined），组件因此 fallback 返回了选项的索引值。

修正方案 #

直接将handleChange的参数改为接收选中值，而非事件对象：

"use client";
import React, { useState } from "react";
import { Select, SelectItem } from "@nextui-org/select";

const ServiceInfoContainer = () => {
  const [service, setService] = useState("");

  const categories = ["Beginner (0-1 year)", "Intermediate (2-3 years)", "Experienced (4-5 years)", "Expert (6+ years)"];

  // 直接接收选中的value值
  const handleChange = (selectedValue) => setService(selectedValue);

  return (
    <Select onChange={handleChange} label="Select years of experience">
      {categories.map((categ, index) => (
        <SelectItem key={index} value={categ}>
          {categ}
        </SelectItem>
      ))}
    </Select>
  );
};

export default ServiceInfoContainer;

说明 #

NextUI的Select组件onChange回调的设计逻辑是：直接返回你给SelectItem设置的value属性值。修改后，service状态会正确存储选中的字符串选项，而非索引。

内容的提问来源于stack exchange，提问作者Muhammed Sainal K.K