Reagieren Sie auf die JS-Referenzfunktion in einer anderen Komponente

Question

Ich versuche, eine Schaltfläche über eine andere Komponente rendern zu lassen, um auf den Status einer anderen Komponente zu verweisen und/oder diesen 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 habe versucht, direkt darauf zu verweisen Inputs.add so was:

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 könnte ich über eine andere Komponente auf die Funktionen einer Komponente zugreifen oder über eine andere Komponente den Zustand einer Komponente beeinflussen?Danke.

Answer 1

Sie könnten dies erfüllen, indem Sie eine übergeordnete Komponente erstellen, die für die Verwaltung des Status verantwortlich ist, und den Zustand dann einfach als Requisiten auf die Unterkomponenten drücken.

generasacodicetagpre.

jsfiddle

Answer 2

Sie können Funktionen für den Rückgabewert von aufrufen renderComponent:

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

Die einzige Möglichkeit, ein Handle für eine React Component-Instanz außerhalb von React zu erhalten, besteht darin, den Rückgabewert von React.renderComponent zu speichern. Quelle.