SetContents SunEditor non funziona React

Question

Sto testando con SunEditor poiché desidero precaricare un testo HTML memorizzato nel DB e consentire agli utenti di modificarlo se necessario. Sto passando una variabile ref dal genitore in modo che quando si fa clic sul pulsante di invio potrebbe ottenere il valore e salvare le modifiche. setContents funziona solo a volte. Quando salvo il progetto e viene compilato di nuovo il testo è apparso. Ma se uso l'app o aggiorno il testo della finestra scompare. Ho verificato che la variabile abbia ancora il valore. Sono nuovo in React e non sono sicuro se sto sbagliando o semplicemente reagendo con suneditor fallendo. Mi potete aiutare?

Ecco il mio codice:

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

Ecco lo screenshot con il contenuto caricato correttamente all'interno di SunEditor div (solo durante la compilazione del progetto):

Se aggiorno la pagina o navigo allo stesso collegamento ...

Ho visualizzato un div con lo stesso contenuto props solo per verificare che fowardRef funzioni. Perché setContents ora funziona? Ho ispezionato con gli strumenti React e la proprietà viene caricata:

Qualche idea?

Answer 1

Sto passando una variabile ref dal genitore in modo che quando si fa clic sul pulsante di invio potrebbe ottenere il valore e salvare le modifiche.

Se tutto ciò di cui hai bisogno per accedere è il valore, passiamo invece un callback. Lo chiameremo onSumbite sarà una funzione che prende il stringvalore dal SunEditorcomponente.

Per avere accesso al valore modificato corrente, sto utilizzando uno stato locale nel TranslationAreacomponente e aggiorno quello stato tramite il onChangemetodo dell'editor . Quindi, quando si fa clic sul pulsante di invio, chiamo onSubmitcon il valore di contentdallo stato locale. (Potrebbe esserci un altro modo per farlo, ma non ho familiarità con SunEditor).

Il TranslationAreacomponente ha questo aspetto:

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

L'ho testato nel mio CodeSandbox dandogli una onSubmitfunzione che registra il contenuto inviato, ma puoi fare tutto ciò di cui hai bisogno con esso.

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 Link