将Slate连接到Formik -是useField吗？

Question

下面是我为托管Slate而创建的React组件：

import React, { useMemo, useState } from "react";
import { Field, useField, ErrorMessage } from "formik";
import { Slate, Editable, withReact } from "slate-react";

const FormRichText = ({ label, ...props }) => {
  const [field, meta] = useField(props);
  const editor = useMemo(() => withReact(createEditor()), []);
  const [editorContent, setEditorContent] = useState(field.value);

  field.value = editorContent;

  return (
        <Slate
          {...field}
          {...props}
          name="transcript"
          editor={editor}
          onChange={(v) => setEditorContent(v)}
        >
          <Editable />
        </Slate>
  );
};

export default FormRichText;

我遇到的问题是，当我试图将它连接到Formik时，无论我编辑什么，都不会传递给handleSubmit中的Formik值。

<FormRichText
     name="transcript"
     id="transcript"
/>

我不理解Formik，这就是为什么我有这个问题。我认为我需要显示Slate的值(我已经将其存储在状态变量中)，但我正在努力通过Formik来了解如何做到这一点。我假设如果我使用Formik，我将能够设置field.value，并将其传递到userField。

Answer 1

这是可行的：

const FormRichText = ({ label, ...props }) => {
  const [field, meta, helpers] = useField(props.name);
  const editor = useMemo(() => withReact(createEditor()), []);

  const { value } = meta;
  const { setValue } = helpers;

  useEffect(() => {
    setValue([
      {
        type: "paragraph",
        children: [{ text: "Type something ..." }],
      },
    ]);
  }, []);

  return (
        <Slate name="transcript" 
          value={value} 
          editor={editor} 
          onChange={(v) => setValue(v)}>
          <Editable />
        </Slate>
      </div>
    </div>
  );
};

希望这对其他人有所帮助。

话虽如此，我仍然必须通过Slate呈现内容，所以我可能会回到这个线程上来！