I want to read the onClick event value properties. But when I click on it, I see something like this on the console:
SyntheticMouseEvent {dispatchConfig: Object, dispatchMarker: “.1.1.0.2.0.0:1”, nativeEvent: MouseEvent, type: “click”, target
My code is working correctly. When I run I can see {column} but can’t get it in the onClick event.
My Code:
var HeaderRows = React.createClass({
handleSort: function(value) {
console.log(value);
},
render: function () {
var that = this;
return(
return (
);
})}
{this.props.externalColumns.map(function (column) {
// Multi dimension array – 0 is column name
var externalColumnName = column[0];
return (
);
})}
);
}
});
How can I pass a value to the onClick event in React js?
Easy Way Use an arrow function: return (th value=column onClick =() => this.handleSort(colUMn)>COLUMN/th> ); .\n\nThis will call handleSort with the right params. Better Way Extracting it into a sub-component. The problem with using an arrow function in the render call is that it creates an unneeded re-render function every time. If you use props as the arguments, you can pass handler, which will only be used when the Props are changed (because handleR) => handleClick = ((this.onHeaderClics).\n\nreturn of render() return (th onClick=this.handleCllick>, this.props.column //th> ); .\n\nThis.props.defaultColumns .map((colUMn) => (TableHeader value=columN onHeAderClick =This.handleSort /> )) Main component?\n\nOld Easy Way (ES5): This is the way you are binding the function with the Component context : return (th value=column onClick =this.handleSort(this, column)>ColumN/th> .
