javascript - ReactJS component onClick not firing own function -
i started component <th>
hard coded in, realized save me time putting them in array , calling before render. onclick event isn't firing.
i added in <th id="category" onclick={this.handleclick}>test cat</th>
show still works. seems because array i'm building outside return () won't fire onclick event.
am doing wrong?
var table = react.createclass({ handleclick: function(sortid) { alert(sortid.target.id); this.props.sortclick(sortid.target.id); }, render: function() { ... var columndiv = this.props.columns.map(function(column, i) { return ( <th id={column} key={i} onclick={this.handleclick}> {column} </th> ); }); return ( <table classname="table table-hover"> <thead> <tr> <th id="category" onclick={this.handleclick}>test cat</th> {columndiv} </tr> </thead> <tbody> {rows} </tbody> </table> ); } });
when this.handleclick
inside mapped function, this
refers function itself. not class.
you need bind function, or reference handleclick before map.
e.g.
var columndiv = this.props.columns.map(function(column, i) { return ( <th id={column} key={i} onclick={this.handleclick}> {column} </th> ); }.bind(this));
Comments
Post a Comment