React JS reference function в другом компоненте

Question

Я пытаюсь получить кнопку, отображаемую через другой компонент, чтобы ссылаться и/или влиять на состояние другого компонента.

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} /> 
    ); 
    } 
}); 

Но это не сработало. Как я могу получить доступ к функциям компонента через другой компонент или повлиять на состояние компонента через другой компонент? Благодарю.

Answer 1

Вы можете выполнить это, создав родительский компонент, который отвечает за управление состоянием, а затем просто подталкивает его к подкомпонентам в качестве реквизита.

/** @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

Answer 2

Вы можете вызывать функции на возвращаемое значение renderComponent:

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

Единственный способ получить дескриптор экземпляра React компонента вне Реагировать является хранение возвращение значение React.renderComponent. Source.