如何为React中的Shadcn Select组件设置默认选中值？

要让Shadcn的Select组件渲染时自动选中指定选项（比如默认选中"apples"），有两种常用实现方式：

1. 非受控模式（无需状态管理） #

直接给<Select>组件添加defaultValue属性，值对应目标SelectItem的value字段即可：

<div className={'mb-8'}>
  <Select defaultValue="apples">
    <SelectTrigger className="w-[300px] text-foreground">
      <SelectValue/>
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        <SelectItem value="apples">Apples</SelectItem>
        <SelectItem value="bananas">Bananas</SelectItem>
        <SelectItem value="mangos">Mangos</SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</div>

2. 受控模式（支持动态修改选中值） #

如果需要后续通过逻辑动态调整选中值，建议使用受控模式，借助React的useState钩子管理选中状态：

import { useState } from 'react';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

// 在你的组件内部
const [selectedFruit, setSelectedFruit] = useState("apples");

return (
  <div className={'mb-8'}>
    <Select value={selectedFruit} onValueChange={setSelectedFruit}>
      <SelectTrigger className="w-[300px] text-foreground">
        <SelectValue/>
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem value="apples">Apples</SelectItem>
          <SelectItem value="bananas">Bananas</SelectItem>
          <SelectItem value="mangos">Mangos</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </div>
);

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