React Hook Form 要求 Controller 的规则总是触发

Question

我开始使用 react-hook-form 来验证我的输入，但要求规则总是触发，即使我 typer/enter 输入字段中的内容也是如此。

import React, { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { Button, Form, Label, Input } from "reactstrap";

const setErrorStyle = (name) => {
  return {
    borderColor: name ? "red" : "",
    boxShadow: name ? "0 0 1.5px 1px red" : ""
  };
};

const App = () => {
  const [comment, setComment] = useState("");
  const {
    handleSubmit,
    control,
    formState: { errors }
  } = useForm();

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

  return (
    <Form onSubmit={handleSubmit(submitForm)}>
      <Label for="commentNote" className="mr-sm-10">
        Note/Comment
      </Label>
      <Controller
        name="commentNote"
        control={control}
        defaultValue={comment}
        rules={{ required: true }}
        render={({ field: { ref, onChange, ...field } }) => (
          <Input
            {...field}
            type="textarea"
            rows={5}
            id="commentNote"
            innerRef={ref}
            value={comment}
            onChange={(e) => setComment(e.target.value)}
            aria-invalid={!!errors.commentNote}
            style={setErrorStyle(errors.commentNote)}
          />
        )}
      />
      {errors.commentNote && (
        <span style={{ color: "red" }} role="alert">
          required
        </span>
      )}
      <Button type="submit" color="primary" size="sm" className="w-auto">
        Submit
      </Button>
    </Form>
  );
};

export default App;

这里是测试沙盒：https://codesandbox.io/s/modern-wind-6v2gp

谢谢

Answer 1

原因是您覆盖了表单的状态处理。你实际上做的是你以这种方式维持你自己的状态。如果您希望 react-hook-form 保持状态，您需要从代码中删除 Input 和 useState 中的 onChange 处理：

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

const setErrorStyle = (name) => {
  return {
    borderColor: name ? "red" : "",
    boxShadow: name ? "0 0 1.5px 1px red" : ""
  };
};

const App = () => {
  const {
    handleSubmit,
    control,
    formState: { errors }
  } = useForm();

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

  return (
    <Form onSubmit={handleSubmit(submitForm)}>
      <Label for="commentNote" className="mr-sm-10">
        Note/Comment
      </Label>
      <Controller
        name="commentNote"
        control={control}
        rules={{ required: true }}
        render={({ field: { ref, ...field } }) => (
          <Input
            {...field}
            type="textarea"
            rows={5}
            id="commentNote"
            innerRef={ref}
            aria-invalid={!!errors.commentNote}
            style={setErrorStyle(errors.commentNote)}
          />
        )}
      />
      {errors.commentNote && (
        <span style={{ color: "red" }} role="alert">
          required
        </span>
      )}
      <Button type="submit" color="primary" size="sm" className="w-auto">
        Submit
      </Button>
    </Form>
  );
};

export default App;

React Hook Form 要求 Controller 的规则总是触发

React Hook Form require rules of Controller always triggering

reactjs

react-hook-form