Next.js中@material-tailwind/react的Select组件如何获取选中值？

@material-tailwind/react的Select组件和原生React的Select使用方式略有不同，它的onChange回调直接返回选中的选项值，而非事件对象。你可以通过以下方式实现获取选中值的功能：

实现步骤 #

1. 使用useState维护选中状态（可选但推荐，用于受控组件）
2. 给Select组件绑定onChange回调，直接接收选中值
3. （可选）给Option组件设置value属性，自定义选中后返回的值

完整示例代码 #

import { useState } from "react";
import { Select, Option } from "@material-tailwind/react";
 
export default function Example() {
  const [selectedVersion, setSelectedVersion] = useState("");

  const handleSelectChange = (value) => {
    setSelectedVersion(value);
    // 这里可以直接使用选中的值进行后续操作
    console.log("选中的版本：", value);
  };

  return (
    <div className="w-72">
      <Select 
        label="Select Version" 
        onChange={handleSelectChange}
        value={selectedVersion} // 绑定选中值，实现受控组件
      >
        {/* 自定义value属性，选中后返回对应值 */}
        <Option value="html">Material Tailwind HTML</Option>
        <Option value="react">Material Tailwind React</Option>
        <Option value="vue">Material Tailwind Vue</Option>
        <Option value="angular">Material Tailwind Angular</Option>
        <Option value="svelte">Material Tailwind Svelte</Option>
      </Select>
      {/* 展示选中结果 */}
      {selectedVersion && <p className="mt-2">当前选中：{selectedVersion}</p>}
    </div>
  );
}

关键说明 #

• 如果不给Option设置value属性，onChange会直接返回Option的子文本内容（比如"Material Tailwind HTML"）；设置value后则返回你指定的自定义值。
• 通过useState维护选中状态，可以让组件成为受控组件，方便在组件的其他逻辑中使用选中值。

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