Réagir JS fonction de référence dans un autre composant
-
22-12-2019 - |
Question
Je vais essayer d'obtenir un bouton rendue par une autre composante de référence et/ou de l'influence de l'état d'un composant différent.
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>
);
}
});
Je veux écrire un nouveau composant qui sera en mesure d'accéder à la fonction ajouter des Entrées.J'ai essayé de faire référence directement avec Inputs.add
comme ceci:
var Add = React.createClass({
render: function(){
return (
<input type="button" className="btn" value="Add an Input" onClick={Inputs.add} />
);
}
});
Mais cela ne fonctionne pas.Comment pourrais-je être en mesure d'accéder à un composant de fonctions par le biais d'un autre composant, ou de l'influence de l'état d'un composant par un autre composant?Merci.
La solution
Vous pourriez faire cela par la création d'un composant parent qui est responsable de la gestion de l'état et ensuite il suffit de pousser l'etat à la sous-composants comme les accessoires.
/** @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);
Autres conseils
Vous pouvez appeler des fonctions sur la valeur de retour de renderComponent
:
var Inputs = React.createClass({…});
var myInputs = React.renderComponent(Inputs);
myInputs.add();
La seule façon d'obtenir un handle vers un Réagir instance de Composant à l'extérieur de Réagir est de stocker la valeur de retour de Réagir.renderComponent. Source.