SetContents SunEditor nie działa. React

Question

Testuję za pomocą SunEditor, ponieważ chcę wstępnie załadować tekst HTML przechowywany w DB i pozwolić użytkownikom zmodyfikować go, jeśli to konieczne. Przekazuję zmienną ref od rodzica, aby po kliknięciu przycisku przesyłania mógł uzyskać wartość i zapisać modyfikacje. setContents po prostu czasami działa. Po zapisaniu projektu i ponownej kompilacji pojawił się tekst. Ale jeśli użyję aplikacji lub odświeżę tekst w oknie, zniknie. Sprawdziłem, czy zmienna nadal ma wartość. Jestem nowy w React i nie jestem pewien, czy robię to źle, czy po prostu nieudana reakcja na suneditor. Możesz mi pomóc?

Oto mój kod:

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

Oto zrzut ekranu z poprawnie załadowaną zawartością wewnątrz elementu div SunEditor (tylko podczas kompilacji projektu):

Jeśli odświeżę stronę lub przejdę do tego samego linku ...

Wyświetliłem div z tą samą zawartością props.cont tylko po to, aby sprawdzić, czy fowardRef działa. Dlaczego setContents teraz działa? Sprawdziłem za pomocą narzędzi React i właściwość jest ładowana:

Dowolny pomysł?

Answer 1

Przekazuję zmienną ref od rodzica, aby po kliknięciu przycisku przesyłania mógł uzyskać wartość i zapisać modyfikacje.

Jeśli wszystko, czego potrzebujesz, to wartość, prześlijmy zamiast tego wywołanie zwrotne. Nazwiemy to onSumbiti będzie to funkcja, która pobiera stringwartość z SunEditorkomponentu.

Aby mieć dostęp do aktualnie edytowanej wartości, używam stanu lokalnego w TranslationAreakomponencie i aktualizuję ten stan onChangemetodą edytora . Następnie po kliknięciu przycisku przesyłania dzwonię onSubmitz wartością contentz lokalnego stanu. (Może być inny sposób, aby to zrobić, ale nie jestem zaznajomiony z SunEditor).

Do TranslationAreaelementów wygląda następująco:

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

Przetestowałem go w moim CodeSandbox, nadając mu onSubmitfunkcję, która rejestruje przesłane treści, ale możesz z nim zrobić wszystko, co trzeba.

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