Loosing .bind(this) in React

Loosing .bind(this) in React

Getting rid of .bind(this) in React component.

on Unsplash

This will be the past

If you used React in your time, you probably had to write some of .bind(this)
code. And yes, I know:

  • it looks pretty ugly
    , plus,
  • it’s taking up some extra space
    in code.

Luckily, there are some proposed features of JavaScript that can make .bind(this)
the past for us.

Before I explain how to loose .bind(this)
, I’ll show you a short example of where this can be used. Let’s say we want to render a button which changes its text when you click it. In order to do that, we would write a component similar to the one below :arrow_down_small:.

We set the toggle
switch in the state to false
in our constructor .

Also, we add the toggleButton
function as onClick
handler function, so it will get called when the button is clicked.

And, we create a simple toggleButton
function which toggles the state when called.

Awesome, seems like we’re good to go!

If we go ahead an click the rendered button, we’ll get a TypeError
like this:

Dang it! It should work ��.

We’re getting an error because this
is not defined when onClick
calls our toggleButton

Usually, you would fix this by binding this
to the toggleButton
function so it always stays the same. Let’s go ahead and bind this
to our function in the constructor with:

After adding it, our button component should look like this:

Try it out, it should do it’s work:

Yay, it’s working! ��

:hocho: .bind(this)

Now, let’s get rid of that annoying .bind(this)
. In order to do that, we’ll use experimental
public class field feature in JavaScript. Public class field feature allow you to use arrow function syntax in your classes:

toggleButton = () => { 
  this.setState({ toggle: !this.state.toggle }); 

Note that this is an experimental
feature in JS, which means it’s not yet accepted into ECMAScript standard, but let’s keep our fingers crossed that it will ��. Until that happens, you can configure babel to transpile it using babel-plugin-transform-class-properties

Let’s see how we can use public class field in our component and change our toggleButton
function in order to loose .bind(this)

Every React developer ever: *looks at line 22–24* “WOW, so pretty :nail_care:. No more
of that pesky little .bind(this).”

What’s also great about public class fields is that we can define state right out of the constructor, and slim down our component:

And voilà, we’ve lost .bind(this)
, and we’ve slimmed down our component a bit, I call this a victory :checkered_flag:! We deserve some kind of an award. Feel free to stroll down the fridge and grab yourself a cold one :beer:, or a chocolate :chocolate_bar:, or whatever you fancy, cus you just learned a whole new thing you can do in React :tada:.

Big thanks toKent C. Dodds for making a video about this
. This article wouldn’t exist without him. Cheers Kent :beers:.

If you liked what you saw, please :clap: and spread the word. Also, check out my website
and follow me
. I’ll be posting more of React related articles, so click “Follow” and stay tuned :movie_camera:.

Also, retweeting this is a great way to help spread the word with your friends:

Good luck! :beers:

Medium责编内容来自:Medium (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » Loosing .bind(this) in React

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录