SetContents SunEditor ไม่ทำงาน React

Question

ฉันได้ทำการทดสอบกับ SunEditor เนื่องจากฉันต้องการโหลดข้อความ HTML ล่วงหน้าที่เก็บไว้ใน DB และให้ผู้ใช้แก้ไขได้หากจำเป็น ฉันกำลังส่งตัวแปรอ้างอิงจากพาเรนต์ดังนั้นเมื่อคลิกปุ่มส่งเขาจะได้รับค่าและบันทึกการปรับเปลี่ยน setContents ใช้งานได้ในบางครั้ง เมื่อฉันบันทึกโครงการและรวบรวมข้อความอีกครั้งปรากฏขึ้น แต่ถ้าฉันใช้แอพหรือรีเฟรชข้อความในหน้าต่างจะหายไป ฉันตรวจสอบแล้วว่าตัวแปรยังคงมีค่าอยู่ ฉันยังใหม่กับ React และฉันไม่แน่ใจว่าฉันทำผิดหรือแค่ suneditor-react ล้มเหลว คุณสามารถช่วยฉันได้ไหม?

นี่คือรหัสของฉัน:

export const TranslationArea = React.forwardRef((props, ref) =>{    
    
    const handleEditorChange = (value) => {
        console.log(value);  
    
        ref.current= value;
      }
     const handleClick  = () => {
         console.log(ref.current);
     } 
    return(
        <div>
            <h2>{props.title}</h2>
                <SunEditor 
                    autoFocus={true}
                    width="100%"
                    height="150px"
                    setOptions={{
                        buttonList: [
                            // default
                            ['undo', 'redo'],
                            ['bold', 'underline', 'italic', 'list'],
                            ['table', 'link', 'image'],
                            ['fullScreen']
                        ]
                    
                    }}
                    setContents={props.content}
                    onChange={handleEditorChange}
            
                />
                <div>{props.content}</div>
            <button onClick={handleClick}>Content</button>
        </div>
    );
});

นี่คือภาพหน้าจอที่มีเนื้อหาโหลดอย่างถูกต้องภายใน SunEditor div (เฉพาะเมื่อรวบรวมโปรเจ็กต์):

ถ้าฉันรีเฟรชหน้าหรือไปที่ลิงค์เดียวกัน ...

ฉันได้แสดง div ที่มี props.content เดียวกันเพียงเพื่อตรวจสอบว่า fowardRef ใช้งานได้ ทำไม setContents จึงใช้งานได้ ฉันตรวจสอบด้วยเครื่องมือ React และคุณสมบัติถูกโหลด:

ความคิดใด ๆ ?

Answer 1

ฉันกำลังส่งตัวแปรอ้างอิงจากพาเรนต์ดังนั้นเมื่อคลิกปุ่มส่งเขาจะได้รับค่าและบันทึกการแก้ไข

หากสิ่งที่คุณต้องการเข้าถึงคือค่าให้ส่งการโทรกลับแทน เราจะเรียกมันว่าonSumbitมันจะเป็นฟังก์ชันที่รับstringค่ามาจากSunEditorส่วนประกอบ

เพื่อให้สามารถเข้าถึงค่าที่แก้ไขปัจจุบันฉันใช้สถานะท้องถิ่นในTranslationAreaส่วนประกอบและอัปเดตสถานะนั้นด้วยonChangeวิธีการของตัวแก้ไข จากนั้นเมื่อคลิกปุ่มส่งฉันเรียกonSubmitด้วยค่าcontentจากรัฐในพื้นที่ (อาจมีวิธีอื่นในการทำเช่นนี้ แต่ฉันไม่คุ้นเคยกับ SunEditor)

TranslationAreaลักษณะองค์ประกอบเช่นนี้

export const TranslationArea = ({initialContent = "", title, onSubmit}) => {    
  const [content, setContent] = useState(initialContent);

  return(
      <div>
          <h2>{title}</h2>
              <SunEditor 
                  autoFocus={true}
                  width="100%"
                  height="150px"
                  setOptions={{
                      buttonList: [
                          // default
                          ['undo', 'redo'],
                          ['bold', 'underline', 'italic', 'list'],
                          ['table', 'link', 'image'],
                          ['fullScreen']
                      ]
                  
                  }}
                  setContents={initialContent}
                  onChange={setContent}
              />
              <div>{content}</div>
          <button onClick={() => onSubmit(content)}>Submit</button>
      </div>
  );
};

ฉันทดสอบใน CodeSandbox ของฉันโดยให้onSubmitฟังก์ชันบันทึกเนื้อหาที่ส่งมา แต่คุณสามารถทำอะไรก็ได้ที่คุณต้องการ

export default function App() {
  const initialContent = "Hello World";
  const onSubmit = (content: string) => {
    console.log("Submitted Content", content);
  };

  return (
    <div className="App">
      <TranslationArea
        initialContent={initialContent}
        onSubmit={onSubmit}
        title="Edit Text"
      />
    </div>
  );
}

ลิงก์ CodeSandbox