Shadcn/ui Select - 当用户选择项目时更改状态

Question

我正在使用 shadnui 并尝试做一些非常简单的事情 > 让用户从 1 到 6 的列表中进行选择。我想在用户选择数字时更新状态。

我找到了这个线程Shadcn ui select组件状态在更改后没有更新所以我尝试了这个：

"use client"
import { useState } from "react"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"


export default function Home() {

  const [practices, setPractices] = useState(1)

  return (
    <>
      <h1>{practices}</h1>
      <div className="flex justify-between w-2/3">Aantal praktijken
      <Select>
  <SelectTrigger className="w-[60px]">
    <SelectValue placeholder="0" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem defaultValue="1" onValueChange={() => ( value=> setPractices(value))}>1</SelectItem>
    <SelectItem value="2" onValueChange={() => ( value=> setPractices(value))} >2</SelectItem>
    <SelectItem value="3" onValueChange={() => ( value=> setPractices(value))} >3</SelectItem>
    <SelectItem value="4" >4</SelectItem>
    <SelectItem value="5" >5</SelectItem>
    <SelectItem value="6" >6</SelectItem>
  </SelectContent>
</Select></div>
    </>
  );
}

这不起作用。有人有什么想法吗？我已经尝试了很多事情。

Answer 1

onValueChange

应给予

<Select>

它发送一个字符串值，因此您必须在设置状态之前解析为 int 或仅将状态设置为字符串类型。

就是这样

  const [practices, setPractices] = useState(1);

  const handleStringToInt = (value: string) => {
    setPractices(parseInt(value))
  }

...
        <Select onValueChange={handleStringToInt}>
          <SelectTrigger className="w-[60px]">
            <SelectValue placeholder="0" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="1">1</SelectItem>
            <SelectItem value="2">2</SelectItem>
            <SelectItem value="3">3</SelectItem>
            <SelectItem value="4">4</SelectItem>
            <SelectItem value="5">5</SelectItem>
            <SelectItem value="6">6</SelectItem>
          </SelectContent>
        </Select>

或

  const [practices, setPractices] = useState("1");

  <Select onValueChange={setPractices}>

<Select onValueChange={setPractices}>

相当于这里的

<Select onValueChange={(val) => setPractices(val)}>

堆栈闪电战