如何在类Component中使用react钩子形式

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;

并且我在类组件中使用react钩子形式时遇到问题
如果可能的话，我的问题是：如何在不将代码重写为钩子版本的情况下将react钩子形式与Class Component一起使用？

Answer 1

不能在react类组件中使用钩子。您提供的类看起来很小，我认为您可以很容易地将其重写为功能组件。也许您不想这样做，您可以使用包装类组件的useForm钩子提供hoc。

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

在您的SignIn组件中只需执行：

export default withUseFormHook(SignIn);

Answer 2

最好、最简单的方法是将类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 3

来自react hook表单文档：

它与类组件一起工作吗？

不，不是现成的。如果你想这样做，你可以建立包装它并在类组件中使用它。

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

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;

Answer 5

我遇到了同样的问题，但最终我可以这样解决：

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import "./styles.css";
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false
};
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(data) {
console.log(data);
}
render() {
const { register, handleSubmit, errors } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit)}>
<label>Example</label>
<input name="example" defaultValue="test" ref={register} />
<label>ExampleRequired</label>
<input
name="exampleRequired"
ref={register({ required: true, maxLength: 10 })}
/>
{errors.exampleRequired && <p>This field is required</p>}
<input type="submit" />
</form>
);
}
}
function App(props) {
const form = useForm();
return <Login {...props} {...form} />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是现场沙盒。

Answer 6

如果使用以下代码，它会起作用：

class SignIn extends React.Component {
...
render() {
const {
register,
formState: { errors },
handleSubmit } = (() => useForm({ mode: "onChange" }))();
return (...);
}
}

这样做是个好做法吗？