I am trying to call an event handler from a child class that is integrated in its parent, but the handler is not being called and I also don't get any error messages.
var Home = React.createClass({
handleClick: function(tableRowId, e) {
console.log("##Clicked##", tableRowId);
}
render : function () {
var tableRows = Data.map(function (tableRow) {
if (SelLines[tableRow.ID]) {
return (
<Tr>
// ...
<Td className = "cellSelected" column = "ACTION">
// ## This doesnt call the handler
<a onClick = {this.handleClick.bind(this, tableRow.ID)}> {tableRow.ACTION} </ a> < / Td >
< / Tr > )
} else {
return (
//...
};
});
return (
< div >
< div >
// ## This does work and call the handler
<a onClick={this.handleClick.bind(this, 1234)}> Test </a>
< Table className = "table" id = "table" >
{tableRows}
< / Table >
< / div >
< / div > );
}
});
The problem is that the this
in Data.map
doesn't refer to the React component. You need to bind this
of React component to the callback of the Data.map
function as well.
UPDATE : because it's difficult to perform the binding 2 levels. This is a simple way to get the this
of React component.
render : function(){
var that = this;
...Data.map(function(){ that.handle...})
....
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments