React (Preact)는 내용을 두 번 렌더링합니다.

Question

편집 가능한 사전 요소에서 텍스트의 원하지 않는 HTML 요소를 피하기 위해 Enter 키를 누를 때만 onKeyDown 스크립트를 실행합니다. 콘텐츠가 다시 렌더링되도록한다

render({}, {content}) { 
     console.log("render: "+content); 
     return <p contenteditable onKeyDown={this.handleKeyDown}>{content}</p> 
} 

handleKeyDown 함수에서

단락 콘텐츠가 변경되고 setState(content: newText) 호출되고있다. 이 결과 새 텍스트가 두 번 쓰여집니다. 내가 "안녕하세요!"를 입력 한 후 휴식 할 때

는 "안녕하세요"는 가 발생합니다 "안녕하세요
세계 worldhello
"

심지어 handleKeyDown 불구과 기능을 렌더링 올바른 문자열을 기록합니다
를 " 안녕
세계 "

여기서 내가 뭘 잘못하고 있니?

Answer 1

contentEditable을 사용하는 경우 일반적으로 dangerouslySetInnerHTML을 사용하여 HTML 콘텐츠를 설정해야합니다.

<div 
    contentEditable 
    dangerouslySetInnerHTML={{ 
     __html: value 
    }} 
    /> 

여기에 그 방법을 보여주는 working JSFiddle example이 있습니다.