SetContents SunEditor não está funcionando React

Question

Tenho testado com o SunEditor desde que desejo pré-carregar um texto HTML armazenado no banco de dados e permitir que os usuários o modifiquem se necessário. Estou passando uma variável ref do pai para que quando o botão enviar for clicado, ele possa obter o valor e salvar as modificações. setContents está apenas funcionando às vezes. Quando eu salvo o projeto e é compilado novamente, o texto aparece. Mas se eu usar o aplicativo ou atualizar a janela, o texto desaparece. Eu verifiquei se a variável ainda tem o valor. Eu sou novo no React e não tenho certeza se estou fazendo errado ou apenas falhando. Pode me ajudar?

Aqui está o meu código:

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

Aqui está a captura de tela com o conteúdo carregado corretamente dentro do div SunEditor (somente ao compilar o projeto):

Se eu atualizar a página ou navegar para o mesmo link ...

Eu exibi um div com o mesmo props.content apenas para verificar se fowardRef está funcionando. Por que setContents está funcionando agora? Eu inspecionei com ferramentas React e a propriedade está carregada:

Qualquer ideia?

Answer 1

Estou passando uma variável ref do pai para que quando o botão enviar for clicado, ele possa obter o valor e salvar as modificações.

Se tudo o que você precisa acessar é o valor, vamos passar um callback. Vamos chamá-lo onSumbite será uma função que obtém o stringvalor do SunEditorcomponente.

Para ter acesso ao valor editado atualmente, estou usando um estado local no TranslationAreacomponente e atualizando esse estado por meio do onChangemétodo do editor . Então, quando o botão enviar é clicado, eu ligo onSubmitcom o valor de contentdo estado local. (Pode haver outra maneira de fazer isso, mas não estou familiarizado com o SunEditor).

O TranslationAreacomponente se parece com isto:

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

Eu testei em meu CodeSandbox, dando-lhe uma onSubmitfunção que registra o conteúdo enviado, mas você pode fazer o que precisar com ele.

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

Link CodeSandbox