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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -