Reagieren JS Referenzfunktion in einer anderen Komponente

Question

Ich versuche, eine Schaltfläche durch eine andere Komponente gerendert werden, um den Status einer anderen Komponente zu verweisen und/oder zu beeinflussen.

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

Ich möchte eine neue Komponente schreiben, die auf die Add-Funktion in Inputs zugreifen kann. Ich versuchte, es direkt mit Inputs.add wie folgt zu verweisen:

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

Aber das hat nicht funktioniert. Wie kann ich auf die Funktionen einer Komponente durch eine andere Komponente zugreifen oder den Status einer Komponente durch eine andere Komponente beeinflussen? Vielen Dank.

Answer 1

Sie können dies erreichen, indem Sie eine übergeordnete Komponente erstellen, die für die Verwaltung des Status zuständig ist, und dann den Status als Requisiten an die Subkomponenten übergeben.

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

Sie Funktionen auf dem Rückgabewert von renderComponent anrufen:

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

Den einzigen Weg, um einen Punkt zu einer Component Reagieren Instanz außerhalb der Rückkehr Reaktion ist durch das Speichern Wert von React.renderComponent. Source.