如何从 Radix/Shadcn 弹出窗口内部关闭它

Question

我有一个 shadcn 弹出窗口，其内容是几个按钮。我想在单击按钮后关闭弹出窗口。我怎样才能做到这一点？

https://ui.shadcn.com/docs/components/popover

Answer 1

我在使用使用基数弹出框的 chadcn 日历组件时遇到了类似的问题。我设法通过实现一个状态来解决这个问题。请注意，为了简洁起见，我省略了一些代码，但我将为您提供基本概念。希望有帮助！

export function Component() {

  const [calendarOpen, setCalendarOpen] = useState(false);

  return (
              <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
                <PopoverTrigger asChild>
                  
                    <Button
                      variant={"outline"}
                      className={cn(
                        "w-[240px] pl-3 text-left font-normal",
                        !field.value && "text-muted-foreground",
                      )}
                    >
                      {field.value ? (
                        format(field.value, "PPP")
                      ) : (
                        <span>Pick a date</span>
                      )}
                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                    </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    onSelect={() => {
                      setCalendarOpen(false);
                    }}
                  />
                </PopoverContent>
              </Popover>
  );
}

Answer 2

<PopoverClose>在 Radix UI 库中， Popover 模块中有一个可用的组件。要使用它，您首先需要Popover从 Radix UI 导入组件shadcn，然后PopoverClose直接从 Radix UI 导入组件。你的代码看起来像这样：

import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { PopoverClose } from "@radix-ui/react-popover";

<Popover>
    <PopoverTrigger>Open</PopoverTrigger>
    <PopoverContent>
        Place content for the popover here.
        <PopoverClose asChild>
            <button>X</button>
        </PopoverClose>
    </PopoverContent>
</Popover>