如何使用 React-hook-form 和 yup 验证 React-quill？

如何解决如何使用 React-hook-form 和 yup 验证 React-quill？

我用过

• react-quill 用于表单元素之一。
• react-hook-form 表单验证
• 是的/是的，用于验证架构的解析器

正常输入和文本区域按预期工作，但对 react-quill 的验证不起作用。

这些是我的代码片段。

自定义 react-quill 包装元素

UnsatisfiedDependencyException

这是表单组件

import React,{ useRef,useState } from "react";
import PropTypes from "prop-types";
import Reactquill from "react-quill";
import "react-quill/dist/quill.sNow.css";
import "react-quill/dist/quill.bubble.css";
import "react-quill/dist/quill.core.css";

function Editor(props) {
  const [theme,setTheme] = useState("sNow");
  const { id,value,inputRef,placeholder,onChange } = props;

  return (
    <Reactquill
      id={id}
      ref={inputRef}
      theme={theme}
      onChange={onChange}
      value={value}
      modules={{
        toolbar: {
          ...Editor.modules.toolbar,handlers: {
            //   image: handleImageUpload,},...Editor.modules,}}
      formats={Editor.formats}
      bounds={".app"}
      placeholder={placeholder ?? ""}
    />
  );
}

/*
 * quill modules to attach to editor
 * See https://quilljs.com/docs/modules/ for complete options
 */
Editor.modules = {
  toolbar: [
    // [{ header: '1' },{ header: '2' },{ font: [] }],// [{ size: [] }],[{ size: ["small",false,"large","huge"] }],// custom dropdown
    [{ header: [1,2,3,4,5,6,false] }],["bold","italic","underline","strike","blockquote"],[
      { list: "ordered" },{ list: "bullet" },{ indent: "-1" },{ indent: "+1" },],["link","image","video"],["clean"],[{ color: [] },{ background: [] }],// dropdown with defaults from theme
    [{ font: [] }],[{ align: [] }],clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,};
/*
 * quill editor formats
 * See https://quilljs.com/docs/formats/
 */
Editor.formats = [
  "header","font","size","bold","blockquote","list","bullet","indent","link","video",];

/*
 * PropType validation
 */
Editor.propTypes = {
  placeholder: PropTypes.string,};

export default Editor;

我检查了这些问题， https://github.com/zenoamaro/react-quill/issues/635

https://github.com/react-hook-form/react-hook-form/discussions/3372

但仍然无法正常工作。

当前行为

我在控制台（编辑器中的 onChange 函数）中确认了更改的降价，但在编辑器更改时看不到 useEffect 钩子的 formState 日志。 （无论是否向Controller添加规则道具）

任何帮助将不胜感激

谢谢

解决方法

export default function App() {
  const {
    register,handleSubmit,setValue,watch,formState: { errors }
  } = useForm();

  useEffect(() => {
    register("emailContent",{ required: true,minLength: 15 });
  },[register]);

  const onEditorStateChange = (editorState) => {
    setValue("emailContent",editorState);
  };

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

  const editorContent = watch("emailContent");

  return (
    <div className="App">
      <ReactQuill
        theme="snow"
        value={editorContent}
        onChange={onEditorStateChange}
      />
      <p className="Error">{errors.emailContent && "Enter valid content"}</p>
      <input type="submit" onClick={handleSubmit(onSubmit)} />
    </div>
  );
}

我创建了一个代码沙箱，其中包含一个用于 react-hook-form 的工作示例。这是链接：

https://codesandbox.io/s/quill-with-react-hook-form-validation-cdjru