Javascript Girl
  1. Javascript Girl
  3. Réagir: comment écouter les événements composant les enfants
Intereting Posts
Supprimer l'élément json Highcharts – Carte de secteur – Stacking avec des séries contenant des valeurs négatives et positives Développement d'un pixel de suivi Enregistrement de variables en dehors de navigator.geolocation.getCurrentPosition? (Javascript) Jquery bxslider intègre ajax Comment obtenir "le jour avant une date" en javascript? Quelle est la différence entre jQuery.bind () et jQuery.on ()? Comment stocker une chaîne dans une variable JavaScript qui possède des guillemets uniques et des guillemets doubles? TinyMCE: les icônes de la barre d'outils n'apparaissent pas Comment puis-je désactiver pour sélectionner l'option particulière dans le menu déroulant AngularJS? Problème avec javascript onkeydown – event.which donne des caractères en majuscules seulement Liste des événements Javascript pris en charge sur iPad Comment nommer une fonction anonyme en JavaScript fait-elle une différence? Dans Android Webview, est-ce que je peux modifier le DOM d'une page web? Comment faire de l'arrière-plan modifier progressivement les couleurs?

Réagir: comment écouter les événements composant les enfants

J'ai un composant, disons qu'il contient un formulaire. Le formulaire comporte des composants enfants qui sont essentiellement des widgets UI pour produire des entrées de texte et sélectionner des menus.

Les composants du menu de sélection sont un peu fantaisie et font un certain état en utilisant l'événement onChange.

Ma question est; Comment puis-je me connecter à l'événement onChange pour un menu sélectionné à partir du composant parent (formulaire)? Je ne peux pas passer surChange à travers les accessoires car j'ai déjà sur Changement spécifié dans le composant sélectionné et je ne veux pas l'annuler.

Exemple: 

var Form = React.createClass({ handleSelectChange: function(){ // Do something when <Select /> changes }, render: function () { var selectMenuOptions = [ {label: 'Choose...', value: ''}, {label: 'First option', value: 'one'}, {label: 'Second option', value: 'two'} ]; return ( <form> <Select name="selectMenu" id="selectMenu" options={selectMenuOptions} /> </form> ); } }); var Select = React.createClass({ getDefaultProps: function() { return { options: [], className: "select" }; }, getInitialState: function () { return { buttonText: 'Loading...', defaultValue: null }; }, handleChange: function (e) { // Update buttonText state }, render: function () { return ( <div className={this.props.className}> <div className="select__button">{this.state.buttonText}</div> <select className="select__selector" ref="select" onChange={this.handleChange}> {this.props.options.map(function(option, i){ return (<Option option={option} key={i} />); })} </select> </div> ); } });

L'utilisation de <Select onChange={...} /> ne remplacera pas le <select onChange={...} /> dans la méthode de render de Select. Le composant <Select/> et le composant <select/> qu'il fournit ont des ensembles d' props complètement différents.

La façon la plus simple de faire ce que vous voulez, je pense, est d'avoir la méthode handleChange votre sélection appeler this.props.onChange . Vous pouvez simplement passer le même argument de l'argument: handleChange : 

 var Form = React.createClass({ handleSelectChange: function(){ // Do something when <Select /> changes }, render: function () { // ... return ( <form> <Select name="selectMenu" id="selectMenu" options={selectMenuOptions} onChange={this.handleSelectChange} /> </form> ); } }); var Select = React.createClass({ // ... handleChange: function (e) { if (this.props.onChange) { this.props.onChange(e); } // Update buttonText state }, render: function () { return ( <div className={this.props.className}> <div className="select__button">{this.state.buttonText}</div> <select className="select__selector" ref="select" onChange={this.handleChange}> {this.props.options.map(function(option, i){ return (<Option option={option} key={i} />); })} </select> </div> ); } });