ReactJS : 상위 요소에서 하위 구성 요소 속성에 액세스

Question

React로 의미 론적 요소를 래핑하여 앱에서 재사용 할 수 있도록 노력 중입니다. 여기

<form onSubmit={this.handleSubmit} method="POST"> 
    <s_input placeHolder={this.props.placeHolderTxt||''}></s_input> 
</form> 

그리고 내 handleSubmit 방법이다 : A는에서 내부

var s_input = React.createClass({ 
     render: function(){ 
      return this.transferPropsTo(
       <div className = "ui input"> 
        <input type="text" placeholder={this.props.placeHolderTxt} ref="text"/> 
       </div> 
      ) 
     } 
    }); 

I는 입력 구성 요소를 사용하고

handleSubmit:function(e){ 
    e.preventDefault(); 
    var text = this.refs.text.getDOMNode().value.trim(); 
       this.refs.text.getDOMNode().value = ''; 
       this.props.onSubmit(text); 
} 

나는 텍스트를 액세스하려고이 문제 재산 입력 구성 요소를 제출할 때 양식을 제출하면과 같은 작업을 수행 할 수 있습니다.. 아무도이 일을하는 법을 알고 있습니다.

Answer 1

그런 다음 <s_input ref="myinput" /> 및 this.refs.myinput.getValue()을 할 수

var input = React.createClass({ 
    render: function(){ 
     return this.transferPropsTo(
      <div className = "ui input"> 
       <input className="ui input" type="text" placeHolder={this.props.placeHolderTxt} ref="text"/> 
      </div> 
     ) 
    }, 
    getValue: function() { 
     return this.refs.text.getDOMNode().value; 
    } 
}); 

뭔가를 할 수 있습니다. onChange 콜백을 전달하도록 코드를 구조화 한 다음 과 같은 방식으로 e.target.value을 읽을 수도 있습니다.