如何在Material Tailwind中设置Select组件的默认值？

Material Tailwind 的 Select 组件是受控组件，默认值不是通过给 Option 加 selected 属性设置的，而是通过 Select 自身的 value 属性结合状态管理来实现的，具体步骤如下：

• 用状态变量存储选中值，初始化时设为你想要的默认选项内容
• 给 Select 组件绑定 value 属性到状态变量
• 添加 onChange 回调，在选项切换时更新状态变量

完整代码示例 #

import { useState } from "react";
import { Select, Option } from "@material-tailwind/react";

export default function DefaultSelect() {
  // 初始化默认值为"Crédito"
  const [selectedProduct, setSelectedProduct] = useState("Crédito");

  const handleChange = (value) => {
    setSelectedProduct(value);
  };

  return (
    <Select 
      label="Type Product" 
      value={selectedProduct} 
      onChange={handleChange}
    >
      <Option>Crédito</Option>
      <Option>Rotativo</Option>
      <Option>Renting</Option>
    </Select>
  );
}

说明 #

Material Tailwind 的 Select 组件设计为受控模式，选中状态完全由父组件传递的 value 控制，所以不需要给单个 Option 设置 selected 属性。只要 value 的值和某个 Option 的文本内容匹配，该 Option 就会被默认选中。

内容的提问来源于stack exchange，提问作者Ruben Dario Guarnizo Martinez