SetContents SunEditor не работает React

Question

Я тестировал SunEditor, так как хочу предварительно загрузить текст HTML, хранящийся в базе данных, и позволить пользователям изменять его при необходимости. Я передаю переменную ref от родителя, чтобы при нажатии кнопки отправки он мог получить значение и сохранить изменения. setContents иногда просто работает. Когда я сохраняю проект и снова компилирую, текст появился. Но если я использую приложение или обновляю окно, текст исчезает. Я проверил, что переменная все еще имеет значение. Я новичок в React и не уверен, делаю ли я это неправильно или просто не могу отреагировать на suneditor. Вы можете мне помочь?

Вот мой код:

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

Вот скриншот с правильно загруженным содержимым в div SunEditor (только при компиляции проекта):

Если я обновлю страницу или перейду к той же ссылке ...

Я показал div с тем же props.content, чтобы проверить, работает ли fowardRef. Почему setContents теперь работает? Я проверил с помощью инструментов React, и свойство загружено:

Есть идеи?

Answer 1

Я передаю переменную ref от родителя, чтобы при нажатии кнопки отправки он мог получить значение и сохранить изменения.

Если все, что вам нужно получить, это значение, давайте вместо этого передадим обратный вызов. Мы назовем его, onSumbitи это будет функция, которая принимает stringзначение от SunEditorкомпонента.

Чтобы получить доступ к текущему измененному значению, я использую локальное состояние в TranslationAreaкомпоненте и обновляю это состояние с помощью onChangeметода редактора . Затем, когда нажимается кнопка отправки, я вызываю onSubmitзначение contentиз локального состояния. (Может быть и другой способ сделать это, но я не знаком с SunEditor).

В TranslationAreaкомпоненте выглядит следующим образом :

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, предоставив ему onSubmitфункцию, которая регистрирует отправленный контент, но вы можете делать с ним все, что вам нужно.

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