在 react-draft-wysiwyg 上使用 formik

Question

我正在為我的表單使用formik 。 我想用 formik 實現react-draft-wysiwyg wysiwyg 編輯器。 但是，在我的案例中，我發現了以下警告。

Warning: Formik called `handleBlur`, but you forgot to pass an `id` or `name` attribute to your input:

因此，我認為，如果存在驗證問題，我無法顯示錯誤，並且如果我移動到下一個表單並返回到我在編輯器上放置內容的表單，狀態也不會保留。

警告是造成這些問題的原因還是我錯過了一些重要的事情？

這是我嘗試將formik與react-draft-wysiwyg formik綁定的formik

import React from "react";
import styled from "styled-components";
import { Editor } from "react-draft-wysiwyg";
import htmlToDraft from "html-to-draftjs";
import draftToHtml from "draftjs-to-html";
import { EditorState, convertToRaw, ContentState } from "draft-js";

import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const EditorField = ({
  input,
  meta,
  field,
  form,
  label,
  placeholder,
  labelCss
}) => {
  const [active, setActive] = React.useState();
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );
  React.useEffect(() => {
    if (form.dirty) {
      return;
    }
    if (!field.value) {
      return;
    }
    const contentBlock = htmlToDraft(field.value);
    if (contentBlock) {
      const contentState = ContentState.createFromBlockArray(
        contentBlock.contentBlocks
      );
      const editorState = EditorState.createWithContent(contentState);
      setEditorState(editorState);
    }
  }, [field.value, form.dirty]);

  const onEditorStateChange = editorState => {
    changeValue(editorState);
  };

  const changeValue = editorState => {
    setEditorState(editorState);
    form.setFieldValue(
      field.name,
      draftToHtml(convertToRaw(editorState.getCurrentContent()))
    );
  };
  const hasError = form.touched[field.name] && form.errors[field.name];
  return (
    <>
      <Wrapper>
        {label && (
          <Label isActive={active} css={labelCss}>
            {label}
          </Label>
        )}
        <Editor
          editorState={editorState}
          wrapperClassName="wrapper-class"
          editorClassName="editor-class"
          toolbarClassName="toolbar-class"
          onEditorStateChange={editorState => onEditorStateChange(editorState)}
          placeholder={placeholder}
          toolbar={{
            options: [
              "inline",
              "blockType",
              "fontSize",
              "fontFamily",
              "list",
              "textAlign",
              "link",
              "embedded",
              "remove",
              "history"
            ]
          }}
          name={field.name}
          id={field.name}
          onFocus={() => setActive(true)}
          onBlur={e => {
            setActive(false);
            field.onBlur(e);
          }}
        />
        {!!hasError && <Error>{hasError}</Error>}
      </Wrapper>
    </>
  );
};

export default EditorField;

const Wrapper = styled.div``;

渲染表單時，我正在執行以下操作

<Field
    component={EditorField}
    name="article"
    label="Write an article"
    placeholder="content here"
/>

我從服務器獲得的數據顯示在編輯器上。

Answer 1

在組件 Editor.js 中

import { useField } from "formik";
const [field, meta] = useField(props.name);
const error = meta.touched && meta.error;

我在下面添加了 <Editor ... />

{meta.touched && meta.error && (
  <FormHelperText>{error}</FormHelperText>
)}

在我在編輯器中單擊時使用編輯器的頁面中，該值默認為<p></p>並且長度為 8，因此dirty 的測試為真

<EditorDraft
  name="value"
  style={{ maxHeight: "200px" }}
  // when click in the editor , the value will be by default <p></p> and length 8
  handleChange={(v) => {
    if (v.length > 8) {
      setFieldValue("value", v);
    } else {
      setFieldValue("value", "");
    }
  }}
  defaultValue={values.value}
  toolbar={{
    options: [
      "inline",
      "blockType",
      "fontSize",
      "fontFamily",
      "list",
      "textAlign",
      "colorPicker",
      "remove",
      "history",
    ],
  }}
/>;