내가이 같은 자동 완성 기능을 가진 텍스트 영역을 강화하고 부모

Question

에 자녀의 이벤트를 전달 :

<MentionAutocomplete ref="autocomplete"> 
    <Textarea ref="editor"/> 
</MentionAutocomplete> 

아이디어는 MentionAutocomplete 자체에 textarea 또는 input처럼 어떤 일을 사용하고 여전히 작동 할 수 있다는 것입니다.

이 잘 작동과 같은 키보드 이벤트를 듣고 자동 완성 달성 :

<div 
    className="MentionAutocomplete" 
    onKeyDown={this.handleKey} 
    onKeyUp={this.handleKeyUp} 
> 
    {this.props.children} 
    {this.renderAutocomplete()} 
</div> 

을하지만 최근 자동 완성 field.value이 undefined 것을 불평 문제로 달렸다. Textarea 구성 요소가 무언가를하고있을 수도 있고 브라우저 확장이 엉망이 될 수도 있습니다.

var self = this; 

<MentionAutocomplete ref="autocomplete"> 
    <Textarea ref="editor" onKeyUp={(event) => self.refs.autocomplete.keyUp(event) } /> 
</MentionAutocomplete> 

하지만 궁금이 오른쪽 접근 방식 :

이상적으로 나는 이런 일을하기를 원하십니까? 더 좋은 방법이 있습니까?

Answer 1

내가 제대로 문제를 이해한다면, 당신은 부모의 이벤트 핸들러를 정의하고 아이를 통과 할 수 있습니다 : 당신이 통과 할 수있는 여기

<div className="MentionAutocomplete"> 
    {React.cloneElement(this.props.children {handleEvent: this.handleEvent})} 
</div> 

handleEvent

가 상위에 정의 기능을 행사 또는 무엇이든간에 어린이가 this.props을 통해 입수 할 수 있습니다.

작성하려는 장치에 적합한 다른 접근법은 기능을 추가하기 위해 본질적으로 다른 구성 요소를 래핑하는 higher order component을 작성하는 것입니다.