Réagir aux événements dynamiques

J'ai des difficultés à associer des événements dynamiques à mes composants réactifs. J'ai les composants suivants:

var ListItem = React.createClass({ render: function() { return ( <li className="selector" > <div className="column"> <h2 className="commentAuthor"> {this.props.author} </h2> <div>{this.props.children}</div> </div> </li> ); } }); var ListBox = React.createClass({ mixins : [MyMixin], render : function() { this.nodes = this.props.data.map(function(item) { return <ListItem author={item.author}>{item.text}</ListItem>; }); return ( <ul id="columns"> {this.nodes} </ul> ); } });

Comme vous voyez, ListItem a className défini sur "selector". Base sur ce «sélecteur» Je souhaite interroger des noeuds et attacher des événements dynamiques dans MyMixin.

 React.renderComponent( <ListBox data={data} selector="li.selector" />, document.getElementById('example') );

Peut-être que mon idée est tout à fait fausse, car je suis fée pour réagir.

Cordialement

Vous devez écouter les événements directement sur le composant ListItem. Réagir ne veut pas que vous pensiez à joindre les auditeurs plus tard.

 var ListItem = React.createClass({ handleClick: function(event) { // Handle ListItem click }, handleDoubleClick: function(event) { // Handle ListItem double click }, render: function() { return ( <li className="selector" onClick={this.handleClick} onDoubleClick={this.handleDoubleClick}> <div className="column"> <h2 className="commentAuthor"> {this.props.author} </h2> <div>{this.props.children}</div> </div> </li> ); } });

React s'attend à ce que les attributs correspondent exactement au nom de l'événement. Vous pouvez consulter la liste complète des événements pris en charge pour vous assurer d'utiliser les bons noms.