Yup校验下React Quill组件Ctrl+V粘贴文本实时预览失效问题

嘿，这个问题我之前帮朋友排查过类似的，就是Formik+Yup校验和第三方富文本编辑器的联动坑！你说的情况太典型了——带着Yup必填校验的React Quill组件，清空内容后用Ctrl+V粘贴，实时预览死活不出来，得点击页面别处或者敲个键盘才显示，去掉校验就一切正常对吧？

问题根源其实是这样的： #

Formik的Field组件和第三方编辑器联动时，状态更新依赖组件正确触发onChange事件同步到Formik的field.value。但当你从空内容通过粘贴变成非空时，Yup的required校验会在状态还没完全同步的时机就触发了，相当于“抢先一步”拦截了状态更新的流程，导致Formik的field.value没有及时更新，自然实时预览就跟不上了。

给你几个实用的解决方案，挑适合你的来： #

方案1：让CustomReactQuill强制同步Formik状态（最推荐）

直接在你封装的CustomReactQuill组件里，监听Quill的内容变化（包括粘贴操作），主动调用Formik的setFieldValue来同步状态，完全绕过校验时机的冲突。

比如修改你的CustomReactQuill：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { useRef } from 'react';

const CustomReactQuill = ({ value, fieldName, form }) => {
  const quillRef = useRef(null);

  // 监听Quill的所有内容变更，不管是键盘输入还是粘贴
  const handleQuillChange = (content) => {
    // 直接强制更新Formik的字段状态
    form.setFieldValue(fieldName, content);
  };

  // 额外监听粘贴事件做双重保障（可选，有些场景下text-change可能触发不及时）
  const handlePaste = () => {
    if (quillRef.current) {
      const editor = quillRef.current.getEditor();
      const currentContent = editor.getHTML(); // 或者getContents()，看你存的是HTML还是Delta格式
      form.setFieldValue(fieldName, currentContent);
    }
  };

  return (
    <ReactQuill
      ref={quillRef}
      value={value}
      onChange={handleQuillChange}
      onPaste={handlePaste}
      theme="snow"
    />
  );
};

export default CustomReactQuill;

这个方法的好处是完全保留实时校验的体验，只是让编辑器的状态同步更“主动”，不会被校验拦截。

方案2：调整Formik的校验时机

如果不想改组件封装，也可以让Formik不要实时校验，改成失去焦点时再校验，这样粘贴内容时就不会有校验拦截状态更新了。

在你的Formik组件里加两个配置：

<Formik
  initialValues={{ content: '' }}
  validationSchema={Yup.object({
    content: Yup.string().required('field is required'),
  })}
  validateOnChange={false} // 关闭输入时的实时校验
  validateOnBlur={true} // 只有失去焦点时才触发校验
  onSubmit={(values) => {
    // 提交逻辑
  }}
>
  {/* 你的Field和组件内容 */}
</Formik>

这个方法最简单，但缺点是失去了“输入时实时提示错误”的体验，只有用户点击别处才会看到校验提示。

方案3：在Field层手动控制状态和校验顺序

如果你不想改组件也不想放弃实时校验，还可以在Field的渲染回调里，手动处理状态更新和校验的顺序——先更新状态，再触发校验。

<Field name="content">
  {({ field, form }) => {
    const handleCustomUpdate = (newContent) => {
      // 第一步：先把新内容同步到Formik状态
      field.onChange(newContent);
      // 第二步：状态更新完成后，再手动触发这个字段的校验
      form.validateField(field.name);
    };

    return (
      <CustomReactQuill
        value={field.value}
        fieldName={field.name}
        // 把自定义的更新方法传给组件
        onChange={handleCustomUpdate}
      />
    );
  }}
</Field>

这个方法相当于把状态更新和校验的顺序手动掰正，确保状态先同步，校验后执行，避免了校验抢先拦截的问题。

总结一下 #

最推荐方案1，因为它从组件根源解决了状态同步的问题，同时保留了实时校验的体验；如果追求快速解决可以选方案2；方案3适合不想动组件封装的场景。你可以根据自己的项目需求挑一个试试，应该就能解决粘贴不实时预览的问题了！

备注：内容来源于stack exchange，提问作者Daniel Talarek