react.js 구성 요소 : 이벤트를 keyDown 얻을 수없는 경우 다른

Question

JS 빈 Available here

내부 구성 요소 I가 내가 키 다운 이벤트를 얻을 대상이되는 ComponentB라는 구성 요소 :

var ComponentB = React.createClass({ 

    render: function() { 
    return (
     <div 
      contentEditable 
      onKeyDown={this.handleKeyDown}>{this.props.data}</div> 
    ); 
    }, 
    handleKeyDown: function(e) { 
    console.log("B: " + e.type +"-" + e.which); 
    } 
}); 

I을 이 ComponentB가 main/App 구성 요소 바로 아래에 있으면 해당 이벤트를 가져올 수 있습니다. 나는 내가 (this.props.lines 3 문자열의 배열입니다) 더 이상 이러한 이벤트를받지 못한 다른 구성 요소의 내부 (componentA을)이 구성 요소를 포함하려고하면

는 :

var ComponentA = React.createClass({ 
    render: function(){ 
     return (
      <div 
      contentEditable> 
      { 
       this.props.lines.map(function(line,i) { 
       return <ComponentB key={i} data={line} /> 
       }) 
      }    
      </div> 
     ); 
    } 
}); 

연관된 JS BIN이 동작을 보여줍니다 경우 구성 요소 A 섹션에서 선을 편집하려고합니다. 어떤 이벤트도 방출되지 않을 것입니다. 아래의 componentB의 sinbgle 인스턴스를 편집하면 ...

react.js의 버그처럼 보이지만 처음에는 여기를 확인하고 싶습니다.

Answer 1

@ssorallen은 의견에있어 반응이 있거나없는 중첩 된 contentEditable 요소를 사용할 수 없습니다.

중첩 된 contentEditable 요소에는 문제가있는 것으로 보입니다. ComponentA에서 contentEditable을 제거하면 예상대로 작동합니다. 하지 정말 지원의 contentEditable을 수행 반작용 때문에이 작동하지 않는 이유

하나입니다. 기본적으로 속성을 설정하지만 contentEditable을 업데이트하려고 할 때 DOM이 지식없이 변경 되었기 때문에 contentEditable에 현명하게 렌더링 할 수 없습니다 (오류가 발생 함).

오히려 contentEditable 요소를 자식 요소가없는 input 요소와 같이 처리해야합니다. 대신 innerHTML (renderComponentToString 및 dangerouslySetInnerHTML 참조)을 업데이트하고 onInput 이벤트를 수신하여 변경 사항을 가져옵니다. 이 작동 방식에 대한 자세한 내용은 Stack Overflow: onChange event for contentEditable을 참조하십시오.

contentEditable의 올바른 처리 방법은 discussed briefly이지만 해결 방법은 없습니다. 그것을 처리 할 수있는 좋은 방법을 자유롭게 제안하십시오.