Как использовать форму реакции-крючка внутри класса Component?

Question

Я использую следующий код для создания страницы входа с проверкой формы:

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

class SignIn extends React.Component {
  
const { register, handleSubmit, errors } = useForm();
const onSubmit = data => console.log(data);
console.log(errors);

  render() {
    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 SignIn;

, и у меня проблема с использованием формы response-hook внутри компонента класса
Мой вопрос, если это возможно , is: Как использовать форму реакции-хука с компонентом класса, не переписывая код для версии хука?

Answer 1

Самый лучший и простой способ - это изменить класс Component на функциональный Component и использовать ловушку useForm. Ниже вы можете найти пример кода:

import React from 'react'

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

const SignIn = () => {

  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 SignIn;

Answer 2

Из документации по форме реакции:

Работает ли он с компонентами класса?

Нет, не из коробки. Если вы хотите сделать это, вы можете построить вокруг него оболочку и использовать ее в своем компоненте класса.

https://react-hook-form.com/faqs#DoesitworkwithClassComponents

Answer 3

Вы не можете использовать хуки в компонентах класса реакции. Предоставляемый вами класс выглядит маленьким, и я думаю, что вы можете легко переписать его в функциональный компонент. Возможно, вы не хотите, вы можете предоставить ho c ловушку useForm, которая обертывает ваш компонент класса.

export const withUseFormHook = (Component) => {
    return props => {
        const form = useForm();
        return <Component {...props} {...form} />
    }       
}

А в компоненте SignIn просто выполните:

export default withUseFormHook(SignIn);

Answer 4

После все большего и большего поиска я использовал это решение:
Создание отдельного файла с версией крючка:

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;