小编Ped*_*dão的帖子

我正在使用 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} …