SetContents SunEditor tidak bekerja React

Question

Saya telah menguji dengan SunEditor karena saya ingin memuat teks HTML yang disimpan di DB dan membiarkan pengguna memodifikasinya jika perlu. Saya meneruskan variabel ref dari orang tua sehingga ketika tombol kirim diklik dia bisa mendapatkan nilai dan menyimpan modifikasi. setContents terkadang hanya berfungsi. Ketika saya menyimpan proyek dan dikompilasi lagi teks muncul. Tetapi jika saya menggunakan aplikasi atau menyegarkan teks jendela menghilang. Saya telah memeriksa bahwa variabel tersebut masih memiliki nilai. Saya baru mengenal React dan saya tidak yakin apakah saya salah melakukannya atau hanya suneditor-react yang gagal. Bisakah kamu membantuku?

Ini kode saya:

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>
    );
});

Berikut adalah tangkapan layar dengan konten yang dimuat dengan benar di dalam div SunEditor (hanya saat menyusun proyek):

Jika saya menyegarkan halaman atau menavigasi ke tautan yang sama ...

Saya telah menampilkan div dengan props.content yang sama hanya untuk memeriksa apakah fowardRef berfungsi. Mengapa setContents sekarang berfungsi? Saya telah menginspeksi dengan alat React dan propertinya dimuat:

Ada ide?

Answer 1

Saya meneruskan variabel ref dari orang tua sehingga ketika tombol kirim diklik dia bisa mendapatkan nilai dan menyimpan modifikasi.

Jika yang Anda butuhkan untuk mengakses hanyalah nilainya, mari kita teruskan callback sebagai gantinya. Kami akan menyebutnya onSumbitdan itu akan menjadi fungsi yang mengambil stringnilai dari SunEditorkomponen.

Untuk memiliki akses ke nilai yang diedit saat ini, saya menggunakan status lokal dalam TranslationAreakomponen dan memperbarui status tersebut melalui metode editor onChange. Kemudian ketika tombol submit diklik, saya memanggil onSubmitdengan nilai dari contentnegara bagian setempat. (Mungkin ada cara lain untuk melakukan ini, tetapi saya tidak terbiasa dengan SunEditor).

The TranslationAreaterlihat komponen seperti ini:

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>
  );
};

Saya mengujinya di CodeSandbox saya dengan memberinya onSubmitfungsi yang mencatat konten yang dikirimkan, tetapi Anda dapat melakukan apa pun yang Anda butuhkan dengannya.

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>
  );
}

Tautan CodeSandbox