reactjs 如何使用Radix UI Select实现React Hook Form？

cygmwpex 于 2023-05-28 发布在 React

关注(0)|答案(2)|浏览(309)

我正在使用基数ui原语Select，但我不知道如何将其与React Hook Form集成。我试着把寄存器放在Select.root标签中，但是没有用。
我还使用了样式化组件，所以所有的选择标签都像这样使用，<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>
        );
      });

然后，我以这种方式创建Select：

<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}
                            </SelectItem>
                              )
                  })}          
             </S.Viewport>
             <S.SelectorDown>
                 Down
             </S.SelectorDown>
          </S.Content>
       </S.Portal>
     </S.Root>
  </S.FormItem>

reactjs

来源：https://stackoverflow.com/questions/75815473/how-can-i-implement-react-hook-form-with-radix-ui-select

2条答案

按热度按时间

4uqofj5v1#

我也遇到了同样的问题，但通过将field. onChangevalue传递给onValueChangeprop解决了这个问题。
我使用“react-hook-form”库中的Controller来 Package Radix Select。
以前我是这样的

<Controller
    control={control}
    name="currency"
    render={({ field }) => {
      return (
        <Select {...field}>
        ....
        </Select>
      ...
 </Controller>

添加onValueChange属性后

<Controller
        control={control}
        name="currency"
        render={({ field }) => {
          return (
            <Select onValueChange={field.onChange} {...field}>
            ....
            </Select>
          ...
</Controller>

对于您的代码，我认为您必须用控制器 Package S.根，它看起来像这样。

<Controller 
       name={`${questionName}`} 
       rules={{required:true}} 
       render={({field})=>{
         <S.Root onValueChange={field.onChange} {...field}>
                  ...
         </S.Root>
    }}></Controller>

赞(0）回复(0）举报 2023-05-28

57hvy0tb2#

我发现问题在于Select.Root组件没有将onChange属性传递给select HTML元素。
为了解决这个问题，我在onValueChange prop中调用onChange函数。仅仅将onChange传递到onValueChange对我来说不起作用，相反，我将输入的value和name作为普通对象传递：

interface FormSelectProps extends UseFormRegisterReturn {
  children?: ReactNode;
}

export const FormSelect = forwardRef<HTMLButtonElement, FormSelectProps>(
  ({ name, onChange, required, disabled, children }, ref) => {
    return (
      <Select.Root
        name={name}
        onValueChange={(value) => onChange({ target: { name, value } })}
        required={required}
        disabled={disabled}
      >
        <Select.Trigger ref={ref}>
          <Select.Value />
          <Select.Icon>
            <ChevronDownIcon />
          </Select.Icon>
        </Select.Trigger>

        <Select.Portal>
          <Select.Content>
            <Select.ScrollUpButton>
              <ChevronUpIcon />
            </Select.ScrollUpButton>

            <Select.Viewport>{children}</Select.Viewport>

            <Select.ScrollDownButton>
              <ChevronDownIcon />
            </Select.ScrollDownButton>
          </Select.Content>
        </Select.Portal>
      </Select.Root>
    );
  }
);

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 如何使用Radix UI Select实现React Hook Form？

2条答案

相关问题

热门标签

最新问答