Shadcn выберите значение по умолчанию

Редактировать:

Важно отметить, что существует два способа использования входа Select: контролируемый и неконтролируемый. Это решение предназначено для неконтролируемого использования, то есть вам не нужно вручную сохранять значение Select. Ответ Берсана показывает способ сделать это контролируемым способом. Вот рабочий пример , показывающий оба варианта использования.

Компонент Select в Shadcn создан на основе Select Primitive Radix. Обычно в верхней части документации компонента Shadcn есть ссылка на реквизиты компонента. Чтобы установить значение по умолчанию для <Select>, добавьте реквизит defaultValue следующим образом:

<Select defaultValue='apples'>
  ...
</Select>

Более подробную информацию о реквизите вы можете найти здесь.

Вот более полный пример установки значения по умолчанию и управления состоянием:

import React, { useState } from 'react'

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../ui/select'

const [selectedOption, setSelectedOption] = useState('apple')

<Select
  value = {selectedOption}
  onValueChange = {(value) => {
    setSelectedOption(value)
  }}
>
  <SelectTrigger className = "w-[180px]">
    <SelectValue placeholder = "Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value = "apple">Apple</SelectItem>
      <SelectItem value = "banana">Banana</SelectItem>
      <SelectItem value = "blueberry">Blueberry</SelectItem>
      <SelectItem value = "grapes">Grapes</SelectItem>
      <SelectItem value = "pineapple">Pineapple</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

ПОПРОБУЙТЕ АРИЯ-ЭТИКЕТКА

function SelectMenu({
  name,
  data,
  value,
  onValueChange,
  defaultValue,
}: ISelectMenu) {
  return (
    <label className = "w-full relative">
      <span className = "absolute p-[5px] bg-black text-mySelect text-xs font-medium -top-[15px] left-5">
        {name}
      </span>
      <Select onValueChange = {onValueChange} value = {value}>
        <SelectTrigger className = "w-full text-myText rounded-[15px] py-5 px-[20px]">
          <SelectValue className = {"text-white"} aria-label = {value} />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {data?.map((item, index) => (
              <SelectItem value = {item.value} key = {index}>
                {item.item}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </label>
  );
}