标签: radix-ui

我正在使用 radix ui 原语 Select，但我不知道如何将它与 React Hook Form 集成。我尝试将寄存器放在 Select.Root 标记中，但没有成功。

我还使用样式化组件，因此所有 Select 标签都像 <S.Something/> 一样使用，因为我已将所有标签导入为 S

这是创建项目的函数：

const SelectItem = React.forwardRef(({ children, ...props } : any, forwardedRef) => {
        return (
          <S.Item  {...props} ref={forwardedRef}>
            <S.ItemText>{children}</S.ItemText>
            <S.ItemIndicator>
              <S.TriggerIcon src="/form/selector-icon.svg" />
            </S.ItemIndicator>
          </S.Item>
        );
      });

然后我这样创建选择：

   <S.FormItem key={index}>
      <S.Label htmlFor={index+''}>{question.question}</S.Label>
      <S.Root {...register(`${questionName}`, { required: true })}>
           <S.Trigger id={index+''}>
               <S.Value/>
               <S.Icon>
               <S.TriggerIcon src="/form/selector-icon.svg" />
               </S.Icon>
           </S.Trigger>
       <S.Portal>
          <S.Content>
             <S.SelectorUp>
                 Up
             </S.SelectorUp>
             <S.Viewport>
                  {question.options?.map((option, i) => {
                       return (
                            <SelectItem key={i} value={option}>
                                {option} …

我正在使用 shadcn 的react-hook-form，我已经设法导航文档以获取我需要的输入和选择，但我创建的 onSubmit 函数没有执行任何操作。

有谁知道为什么？

"use client";

import * as z from "zod";
import { SubmitHandler, useForm, UseFormRegister } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Input } from "./ui/input";
import ErrorMessage from "./ErrorMessage";
import { Button } from "./ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "./ui/Form";
import { Textarea } from "./ui/textarea";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import toast from "react-hot-toast";

type ReminderFormSchemaType = z.infer<typeof …