Question

嘿，我是Formik库的新手，我想在Formik中使用react-draft-wysiwyg组件。这是我的代码。

RichTextEditor.js

import React, { useState } from "react";
import { EditorState, convertToRaw, ContentState } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import draftToHtml from "draftjs-to-html";
import htmlToDraft from "html-to-draftjs";
import { useField } from "formik";

const RichTextEditor = (props) => {
  const [field, meta, helpers] = useField(props);

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

  const prepareDraft = (value) => {
    const draft = htmlToDraft(value);
    const contentState = ContentState.createFromBlockArray(draft.contentBlocks);
    const editorState = EditorState.createWithContent(contentState);
    return editorState;
  };

  const [editorState, setEditorState] = useState(
    value ? prepareDraft(value) : EditorState.createEmpty()
  );

  const onEditorStateChange = (editorState) => {
    const forFormik = draftToHtml(
      convertToRaw(editorState.getCurrentContent())
    );
    setValue(forFormik);
    setEditorState(editorState);
  };

  return (
    <div>
      <Editor
        editorState={editorState}
        wrapperClassName="demo-wrapper"
        editorClassName="demo-editor"
        onEditorStateChange={onEditorStateChange}
        {...props}
        {...field}
      />
    </div>
  );
};

export default RichTextEditor;

和AddPost.js

import React from "react";
import { Row, Col, Card, Form, Input } from "antd";
import { useFormik, Field } from "formik";
import RichTextEditor from "../RichTextEditor/RichTextEditor";

const initialValues = {
  title: "",
  body: "",
};
export default function AddContent() {
  const formik = useFormik({
    initialValues,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <Row>
      <Col span={19}>
        <Card>
          <>
            <h1>
              {formik.values.title ? formik.values.title : "Content Title"}
            </h1>

            <Form onSubmit={formik.handleSubmit}>
              <Input
                id="title"
                name="title"
                placeholder="Content Title"
                onChange={formik.handleChange}
                value={formik.values.email}
              />

              <Field
                name="body"
                component={RichTextEditor}
                value={formik.values.body}
                onChange={formik.handleChange}
                // {...formik.getFieldProps("body")}
              />
            </Form>
          </>
        </Card>
      </Col>
      <Col span={5}></Col>
    </Row>
  );
}

但是我遇到以下错误

TypeError: formik.getFieldProps is not a function
Field
src/Field.tsx:181

  178 |     unregisterField(name);
  179 |   };
  180 | }, [registerField, unregisterField, name, validate]);
> 181 | const field = formik.getFieldProps({ name, ...props });
      | ^  182 | const meta = formik.getFieldMeta(name);
  183 | const legacyBag = { field, form: formik };
  184 |

Answer 1

出现此错误是因为您在 formik 提供的 getFieldProps() 组件上使用了 Field 函数，而不是在像 Input 这样的普通组件上使用 <Form onSubmit={formik.handleSubmit}> <Input id="title" placeholder="Content Title" {...formik.getFieldProps("title")} /> <Input component={RichTextEditor} {...formik.getFieldProps("body")} /> </Form> 函数，这两者的工作方式不同。

你应该这样使用它。

    class Person:
    
        def __init__(self):
#I'm supposed to have the object set to these generic names at first and then after the prompt function they need to be updated.
            self.name = 'anonymous' 
            self.b_year = 'unknown'
    
        def prompt(self):
            print('Please enter the following:')
            self.name = input('Name: ')
            self.b_year = input('Year: ')
            b = Book()
            b.prompt()
    
    
        def display(self):
            print(f'Author:\n{self.name} (b. {self.b_year})\n')
    
    class Book:
    
        def __init__(self):
            self.title = 'untitled'
            self.publisher = 'unpublished'
    
        def prompt(self):
            self.title = input('Title: ')
            self.publisher = input('Publisher: ')
    
        def display(self):
            print(f'\n{self.title}\nPublisher:\n{self.publisher}')
            p = Person()
            `enter code here`p.display()
    
    def main():
        p = Person()
        b = Book()
        
        b.display()
        p.prompt() 
        b.display() #right here I need it to display the new information
    
    if __name__ == '__main__':
        main()

有关 getFieldProps() 的更多信息；

https://formik.org/docs/tutorial#getfieldprops

Answer 2

我遇到了同样的问题，并使用以下修复程序进行了修复。
简而言之，用 FormikProvider 包装渲染器。

AddPost.js

// add FormikProvider
import { useFormik, Field, FormikProvider } from "formik";

const formik = useFormik({
  initialValues,
  onSubmit: (values) => {...},
});

// wrap with FormikProvider
return (
  <FormikProvider value={formik}>
    <Row>...your-code...</Row>
  </FormikProvider>
)

将useFormik（）与<Field />一起使用会出错：formik.getFieldProps不是函数

2 个答案: