Реагировать (сайт Preact) оказывает содержание в два раза

Question

Реагировать (сайт Preact) оказывает содержание в два раза

На редактируемом предварительном элементе я запускаю сценарий onKeyDown только при нажатии клавиши enter, чтобы избежать нежелательных HTML-элементов в тексте.

render({}, {content}) {

        console.log("render: "+content);

        return <p contenteditable onKeyDown={this.handleKeyDown}>{content}</p>

}

В функции handleKeyDown Содержание абзацев изменяется и setState(content: newText) вызывается таким образом, что содержание должно быть воспроизведено снова. Это приводит к тому, что новый текст пишется дважды.

Когда я наберу "hello world" и сломаюсь после "hello", это приведет к
"привет

worldhello

мир "

Несмотря на то, что handleKeyDown и функция render регистрирует правильную строку:

"привет

мир "

Что я здесь делаю не так?

665 1

reactjs preact

1 ответ:

Comments

Ничего не найдено.

Jason Miller · Accepted Answer · 2017-02-02 06:35:19

При использовании contentEditable обычно следует использовать dangerouslySetInnerHTML для задания содержимого HTML.
  <div
    contentEditable
    dangerouslySetInnerHTML={{
      __html: value
    }}
  />
Вот рабочий пример JSFiddle, показывающий, как это сделать.