表单验证不适用于带有 Reactstrap 的 React 钩子表单版本 7答案

【问题标题】：Form validation not working with React hooks form version 7 with Reactstrap表单验证不适用于带有 Reactstrap 的 React 钩子表单版本 7
【发布时间】：2022-01-01 17:10:10
【问题描述】：

表单验证不适用于 React strap 和 React hook 表单版本 7。在上面的沙盒项目中，当我单击提交按钮而不在 bio 输入中输入文本时，需要获取错误 bio 字段。然后当我在该字段上键入时，错误消息不会消失。版本 7 与普通的 HTML 表单和元素配合得很好。但与 reactstrap 发生冲突。

反应版本：17.2 React 钩子形式版本：7.22 Reactstrap 版本：9.0

import "./styles.css";
import { Form, FormGroup, Input, Label, Button } from "reactstrap";
import * as Yup from "yup";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

export default function App() {
  const schema = Yup.object().shape({
    bio: Yup.string().required()
  });

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors }
  } = useForm({
    resolver: yupResolver(schema)
  });

  const submitHandle = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Form onSubmit={handleSubmit(submitHandle)} onReset={reset}>
        <FormGroup>
          <Label for="bio">Bio</Label>
          <Input id="bio" name="bio" type="text" {...register("bio")} />
          {errors.bio && <p className="invalid">{errors.bio.message}</p>}
        </FormGroup>
        <FormGroup>
          <br/>
          <Button color="primary">Save</Button>
        </FormGroup>
      </Form>
    </div>
  );
}

代码沙箱：https://codesandbox.io/s/ancient-smoke-0ccbn

【问题讨论】：

标签： javascript reactjs react-hook-form reactstrap

【解决方案1】：

我在您的沙箱链接中没有找到任何内容，但您的问题是因为引用，react-hook-form 需要访问输入的引用，而 reactstrap 的 Input 组件通过 innerRef 属性公开引用，因此有两种解决方案可以解决您的问题：

1- 像这样手动注册字段：

default function App() {
  ...
  const {ref,...bio} = register('bio');
  return (
   <Form onSubmit={handleSubmit(submitHandle)} onReset={reset}>
      <FormGroup>
        <Label for="bio">Bio</Label>
        <Input id="bio" name="bio" type="text"  {...bio} innerRef={ref}/>
        {errors.bio && <p className="invalid">{errors.bio.message}</p>}
      </FormGroup>
    </Form>
  );
}

2- 使用Controller 组件，它将负责注册过程，如下所示：

default function App() {
  ...
 const {
  handleSubmit,
  reset,
  control,
  formState: { errors },
 } = useForm({
  resolver: yupResolver(schema),
  defaultValues: { bio: '' },
 });
  ...
  return (
   <Form onSubmit={handleSubmit(submitHandle)} onReset={reset}>
      <FormGroup>
        <Label for="bio">Bio</Label>
        <Controller
          id="bio"
          name="bio" 
          control={control}
          render={({ field }) => <Input {...field} />}
        />
        {errors.bio && <p className="invalid">{errors.bio.message}</p>}
      </FormGroup>
    </Form>
  );
}

【讨论】：