1 
import draftToHtml from "draftjs-to-html";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertFromRaw, convertToRaw } from "draft-js";

const Sampleform=()=>{
   const { ContextData } = useContext(SomeContext);
  const [data, setData] = useState(EditorState.createEmpty());

  const[loading,setLoading]=useState(false);

  const [details, setDetails] = useState({
    body:data,
    date: null,
    dataNew: true,
  });

 useEffect(() => {
  setLoading(true);

  (async () => {
    if (details) {
      setDetails(
       details
      )
    }else{
      try{
        setDetails({...details,
          body: //body deatils whick comes from backend
        });
        setDetails(details);
      }catch(error){
        console.log(error);
      }
    }
  })
  }, [])

  useEffect(() => {
    setLoading(true);
    if (details && details.dataNew) {
      try {
        getNewDetails();
      } catch (error) {
        console.log(error);
      }
    }
  }, [ContextData]);

const getNewDetails =()=>{
  //func working
}

return(
        <Formik
            enableReinitialize={true}
            initialValues={letterBody}
            validationSchema={validationSchema}
            onSubmit={(letterBody, { setSubmitting }) => {
              details.body = draftToHtml(letter.getCurrentContent());
            }}
          >
            {({
              values,
              handleBlur,
              handleChange,
              setFieldValue,
              handleSubmit,
              isSubmitting,
              errors,
              touched,
            }) => (
              <Form>
{/* data input here its works fine */}
                  <div>
                    <Editor
                      editorState={data}
                      wrapperClassName="demo-wrapper"
                      editorClassName="demo-editor"
                      onEditorStateChange={(data) => setData(data)}
                      value={data}
                      onblur={handleBlur}
                      toolbar={{
                        options: ["inline", "list", "link", "remove"],
                        inline: {
                          options: ["bold", "italic", "underline"],
                          bold: { className: "bordered-option-classname" },
                          italic: { className: "bordered-option-classname" },
                          underline: { className: "bordered-option-classname" },
                        },
                      }}
                      spellCheck={true}
                    />
                  </div>     
              </Form>
            )}
      </Formik>
  );
};


export default Sampleform;

**想将来自后端 API 的数据发送到我的文本编辑器，然后从文本编辑器更改这些数据，在这里日期组件运行良好，但文本编辑器没有任何意义，如何使用“react-带有 formik 的草稿-WYSIWYG" 文本编辑器**

我在上面提供了一个代码示例，这是完成上述任务的最佳方法，使用 react useEffect 和带有 formik 的“react-draft-WYSIWYG”，文本编辑器值不会改变我的状态

4

0 回答 0