React 钩子形式和 Chakra

Question

我刚开始学习 Charkra，我试图用钩子形式连接一个基于 chakra 的自定义输入。但是我的输入总是 returning undefined

这是我的自定义输入`

export const 输入 = ({...rest}) =>{ return(

        <InputChakra
         {...rest}
         focusBorderColor='black'
         bg="gray.0"
         w={["300px", "300px", "420px", "420px"]}
         h="55px"
         fontSize="xl"
         />
)

}`

这是我的表格

<Vstack
                    as="form"
                    onSubmit={handleSubmit(onSubmit)}
                >
                    <Input placeholder="Login" type="text"  {...register("name")}/>
                    <Input  placeholder="Senha" type="password" />
                    <ButtonPrimary type="submit">Logar</ButtonPrimary>
                </VStack>

Answer 1

由于 React 无法通过 props 转发引用，你必须为你的 Input 组件使用 forwardRef。像这样

export const Input = forwardRef(({...rest}, ref) =>{ 
  return(
    <InputChakra
     focusBorderColor='black'
     ref={ref}
     bg="gray.0"
     w={["300px", "300px", "420px", "420px"]}
     h="55px"
     fontSize="xl"
     {...rest}
   />
)})

React 钩子形式和 Chakra

React hook form and Chakra

reactjs

react-hook-form

chakra-ui