代码之家 › 专栏 › 技术社区 › Santi

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

drop-down-menu select next.js reactjs

Santi · 技术社区 · 1 年前

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

我找到了这根线 Shadcn ui select component state not updating after change 所以我试了一下:

"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>
    </>
  );
}

它不起作用。有人知道吗?我试过很多东西。

1 回复 | 直到 1 年前

cmgchess 1 年前

onValueChange 应该给 <Select> 。您可以在中找到 Radix UI docs shad cn在引擎盖后面使用的。

它发送一个字符串值,因此在设置状态之前必须解析为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)}> 在这里

Stackblitz

推荐文章

Yahya · 不能将我保存在props中的id用作reactselect中的默认值

10 月前

RSW · 使用plotly绘制多个pandas列,并使用下拉菜单选择列

1 年前

Jake Hembree · 多个下拉框

1 年前

MaÅ¥o Valapka · 下拉菜单会扭曲其他按钮

1 年前

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

1 年前

João Bosco · 使用python player从选择下拉列表中选择一个值

1 年前

Xeschoz · 为discord bot制作下拉菜单时出错

1 年前

Meghan M. · JS新手:NodeList返回null但有元素

1 年前

Hiyanneri · CSS-如何使用CSS增加下拉列表的宽度?

1 年前

T.Omalley · 数据验证源Excel中的嵌套函数

1 年前