微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

将数据从后端设置到文本编辑器,然后更改这些数据

如何解决将数据从后端设置到文本编辑器,然后更改这些数据

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-draft-WYSIWYG”文本编辑器与 formik **

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。