reactjs 如何使用基于类的组件的React Hook Form？

mwngjboj 于 2022-11-29 发布在 React

关注(0)|答案(3)|浏览(201)

我已经检查了官方文档，意识到我们不能直接在基于类的组件中使用钩子。所以，我尝试了HOC方法来使用基于类的组件的react-hook-form。
但这个案子在我的案子里也不起作用。
我的HOC组件：

import React from "react";
import { useForm } from "react-hook-form"

export const ClassHookFormWrap = (Component) => {
   const form = useForm();
   console.log("form", form, Component)
   return (props) => {
      return <Component form={form} {...props}  />;
   };
};

我的基于类的组件：：

import React from "react";
import { ClassHookFormWrap } from "./ClassHookFormWrap";

class ClassHookForm extends React.Component {
   onSubmit = (data) => {
      console.log(data);
   }
   render(){
      console.log("this.props", this.props)
      return(
         <div>Form</div>
      )
   }
}

export default ClassHookFormWrap(ClassHookForm);

控制台内部出现错误：

这是一个沙箱链接我已经添加了一个代码示例在这里：：https://codesandbox.io/s/old-monad-7mkxg8?file=/src/App.js:224-237
有没有办法在基于类的组件中使用这种形式？

reactjs

来源：https://stackoverflow.com/questions/74569207/how-to-use-react-hook-form-with-class-based-component

3条答案

按热度按时间

2skhul331#

钩子应该用在一个组件或者一个自定义钩子里面。HOC基本上是一个返回组件的函数。所以为了让它工作，你可以像这样把useForm钩子移到return函数里

export const ClassHookFormWrap = (Component) => {
   return (props) => {
      const form = useForm();
      console.log("form", form, Component)
      return <Component form={form} {...props}  />;
   };
};

赞(0）回复(0）举报 2022-11-29

cl25kdpy2#

实际上，钩子必须在函数组件的主体内部使用。你在HOC内部使用它，HOC是一个函数，而不是一个函数组件，但是HOC返回的是一个组件（这里是函数组件）。所以**只需将useForm移到return内部，**而不是直接在HOC内部使用它。类似于这样。

export const ClassHookFormWrap = (Component) => {
   return (props) => {
   const form = useForm();
   console.log("form", form, Component)
      return <Component form={form} {...props}  />;
   };
};

如果不行就告诉我。
为返回组件添加一个名称以避免eslint错误。

export const ClassHookFormWrap = (Component) => {
  return function Wrap(props) {
    const form = useForm();
    console.log("form", form, Component);
    return <Component form={form} {...props} />;
  };
};

赞(0）回复(0）举报 2022-11-29

h7wcgrx33#

最好和最简单的方法是将类Component更改为函数Component并使用useForm挂钩。
你仍然想要相同的我用这样（注：这是我的例子，你可以根据你的要求改变它）：
挂钩版本的单独文件：

import React from 'react'

import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
import { useForm } from 'react-hook-form';

const SignInHook = () => {

const { register, handleSubmit, errors } = useForm();
const onSubmit = data => console.log(data);
console.log(errors);

return (
<>
  <div>
    <Form onSubmit={handleSubmit(onSubmit)}>

        <Label>Email : </Label>
        <Input type="email" placeholder="email" name="email" ref={register({required: true, pattern: /^\S+@\S+$/i})}></Input>

        <Label>Password : </Label>
        <Input type="password" placeholder="password"  name="password" ref={register({required: true, min: 8, maxLength: 20})}></Input>

    </Form>
  </div>
</>
)
}

export default SignInHook

并在我的类组件中使用它：

import React from 'react';
import SignInHook from './SignInHook';

class SignIn extends React.Component {

render() {
 return (
  <div>
    <SignInHook></SignInHook>
  </div>
);
}}

export default SignIn;

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs 如何使用基于类的组件的React Hook Form？

3条答案

相关问题

热门标签

最新问答