If I have a function that I want to use in a onClick, such as this
*using ReactJS and Semantic-UI
<Table.HeaderCell
onClick={this.handleSort(items)}
>
where the function returns a reference of a function, such as this
handleSort = (items) => () => {
console.log('now')
}
then, how can I execute this function outside of the onClick event? What doesn't work:
componentDidMount() {
this.handleSort.call(items);
this.handleSort(items);
}
I guess you are trying to execute the inner function that logs 'now' to the console.
As a clarification: this.handleSort(items) returns a anonymous function:
() => {
console.log('now')
}
In order to call it, you may do: this.handleSort(items)() to immediately invoke the inner function.
See:
var handleSort = (items) => () => {
console.log('now')
}
// holds the inner function part
var innerFunction = handleSort([]);
console.log(innerFunction.toString());
// Equivalent ways to call it directly
innerFunction();
handleSort([])();
Table.HeaderCellis rendered this function is recreated every time. If you do this to use theitemsas an argument, maybe there are better ways. For example, if theitemsis in your state or it is coming from a prop, you can use it directly instead of currying the function.