SetContents SunEditor çalışmıyor React

Question

DB'de depolanan bir HTML metnini önceden yüklemek ve gerektiğinde kullanıcıların değiştirmesine izin vermek istediğimden beri SunEditor ile test ediyorum. Üst öğeden bir ref değişkeni geçiriyorum, böylece gönder düğmesi tıklandığında değeri alabilir ve değişiklikleri kaydedebilir. setContents sadece bazen çalışıyor. Projeyi kaydettiğimde ve tekrar derlendiğinde metin çıktı. Ancak uygulamayı kullanırsam veya pencere metnini yenilersem kaybolur. Değişkenin hala değere sahip olup olmadığını kontrol ettim. React'te yeniyim ve yanlış mı yaptığımdan yoksa sadece suneditör-react başarısız mı olduğundan emin değilim. Bana yardımcı olabilir misiniz?

İşte kodum:

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 içine düzgün şekilde yüklenmiş içeriğe sahip ekran görüntüsü (yalnızca proje derlenirken):

Sayfayı yenilersem veya aynı bağlantıya gidersem ...

Sadece fowardRef'in çalışıp çalışmadığını kontrol etmek için aynı props.content ile bir div görüntüledim. SetContents neden şimdi çalışıyor? React araçlarıyla inceledim ve özellik yüklendi:

Herhangi bir fikir?

Answer 1

Üst öğeden bir ref değişkeni geçiriyorum, böylece gönder düğmesi tıklandığında değeri alabilir ve değişiklikleri kaydedebilir.

Erişmeniz gereken tek şey değerse, bunun yerine bir geri arama iletelim. Onu çağıracağız onSumbitve stringdeğeri SunEditorbileşenden alan bir fonksiyon olacak .

Mevcut düzenlenmiş değere erişmek için, TranslationAreabileşende yerel bir durum kullanıyorum ve bu durumu editörün onChangeyöntemiyle güncelliyorum . Daha sonra gönder butonuna tıklandığında yerel eyaletten onSubmitdeğeri ile çağırırım content. (Bunu yapmanın başka bir yolu olabilir ama SunEditor'a aşina değilim).

TranslationAreaBöyle bileşen görünüyor:

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'ımda onSubmit, gönderilen içeriği günlüğe kaydeden bir işlev vererek test ettim , ancak onunla ne yapmanız gerekiyorsa yapabilirsiniz.

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 Bağlantısı