다른 구성 요소의 JS 참조 기능에 응답하십시오.

다른 구성 요소의 상태를 참조 및/또는 영향을주는 다른 구성 요소를 통해 렌더링 된 단추를 얻으려고합니다.다른 구성 요소의 JS 참조 기능에 응답하십시오.

var Inputs = React.createClass({ 
    getInitialState: function(){ 
    return {count: 1}; 
    }, 
    add: function(){ 
    this.setState({ 
     count: this.state.count + 1 
    }); 
    }, 
    render: function(){ 
    var items = []; 
    var inputs; 
     for (var i = 0; i < this.state.count; i++){ 
     items.push(<input type="text" name={[i]} />); 
     items.push(<br />); 
     } 
    return (
     <div className="col-md-9"> 
     <form action="/" method="post" name="form1"> 
      {items} 
      <input type="submit" className="btn btn-success" value="Submit Form" /> 
     </form> 
     </div> 
    ); 
    } 
});

입력에서 추가 기능에 액세스 할 수있는 새 구성 요소를 작성하고 싶습니다. 나는 이것을 다음과 같이 Inputs.add과 직접 참조하려고 시도했다 :

var Add = React.createClass({ 
    render: function(){ 
    return (
     <input type="button" className="btn" value="Add an Input" onClick={Inputs.add} /> 
    ); 
    } 
});

그러나 그것은 작동하지 않았다. 다른 구성 요소를 통해 구성 요소의 기능에 액세스하거나 다른 구성 요소를 통해 구성 요소의 상태에 어떻게 영향을 줍니까? 감사.

출처

2014-01-10 user2829448

상태 관리를 담당하는 상위 구성 요소를 만든 다음이 상태를 하위 구성 요소 인 하위 집합으로 푸시하여이 작업을 수행 할 수 있습니다.

/** @jsx React.DOM */ 

var Inputs = React.createClass({ 

    render: function() { 
     var items = []; 
     var inputs; 
     for (var i = 0; i < this.props.count; i++) { 
      items.push(<input type="text" name={[i]} />); 
      items.push(<br />); 
     } 
     return ( 
      <div className = "col-md-9"> 
       <form action = "/" method = "post" name = "form1"> 
        {items} 
        <input type="submit" className="btn btn-success" value = "Submit Form" />    
       </form> 
      </div> 
     ); 
    } 
}); 

var Add = React.createClass({ 
    render: function() { 
     return (<input type = "button" className="btn" value="Add an Input" onClick={this.props.fnClick}/>); 
    } 
}); 

var Parent = React.createClass({ 
    getInitialState: function(){ 
     return {count:1} 
    }, 
    addInput: function(){ 
     var newCount = this.state.count + 1; 
     this.setState({count: newCount}); 
    }, 
    render: function(){ 
     return (
      <div> 
       <Inputs count={this.state.count}></Inputs> 
       <Add fnClick={this.addInput}/> 
      </div> 
     ); 
    } 
}); 

React.renderComponent(<Parent></Parent> , document.body);

jsFiddle

출처

2014-01-11 13:44:58

부모 - 자식 구성 요소 설정이 이미 있었지만 부모 함수를 사용하도록 설정하는 데 문제가 있습니다. 이 대답은 저에게 소품으로 기능을 전달하는 데 도움이되었습니다. 감사합니다. – redlena

당신은 renderComponent의 반환 값에 함수를 호출 할 수 있습니다 : 외부의 반작용 반작용 구성 요소 인스턴스에 대한 핸들을 얻을 수

var Inputs = React.createClass({…}); 
var myInputs = React.renderComponent(Inputs); 
myInputs.add();

수있는 유일한 방법은 수익을 저장하는 것입니다 React.renderComponent의 값입니다. Source.

출처

2014-09-25 08:25:51 Sjoerd

다른 구성 요소의 JS 참조 기능에 응답하십시오.

답변

관련 문제