React在没有箭头函数的回调中访问setState

Question

I am developing code for the corporate intranet. Once the base was built using arrow functions I tested in Internet Exploder. Discovering that it will not accept arrow functions. I am using React for this project and have since refactored all the code to use classic function calls.

It mostly works except for one minor glitch: I cannot access this from inside the function call.

Here is one example of code, although there are others:

<NavLink onClick={function () { 
    this.setState({ openCount: item.pageId }); 
    this.props.CurrentPage_Update(item) 
    }
} 
className="menu menu-link" 
key={"DDNavLink_" + item.pageId}>
{item.title}
</NavLink>

How can I access the 'this' object for all my function calls? I tried creating a variable in the order of var set=this.setState; but that failed, although it does work with bound functions.

I am not sure where to go although I have read about babel but am completely agnostic about it's use and function, especially for such a seemingly simple refactor.

Thanks

Answer 1

At the end of every function call I used .bind(this) to enable the function to use the external this rather than the internal.

//blah blah blah
}.bind(this)

I found that I have to do it at the end of every closing brace if there are any calls to this within the function. I plan on making it a habit for every classic function call whether it is necessary or not.