表单验证不适用于带有 Reactstrap 的 React hooks 表单版本 7

Question

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

反应版本：17.2 反应挂钩形式版本：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

Answer 1

我没有在你的沙盒中找到任何东西 link，但你的问题是因为 ref，react-hook-form 需要访问输入的 ref，而 reactstrap 的 Input 组件通过 innerRef prop 暴露 ref，所以有两种方案可以解决你的问题：

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>
  );
}

表单验证不适用于带有 Reactstrap 的 React hooks 表单版本 7

Form validation not working with React hooks form version 7 with Reactstrap

javascript

reactjs

reactstrap

react-hook-form