How to Use Arrow Functions (Public Class Fields) as Class Methods

How to use arrow functions (public class fields) as class methods?

Your syntax is slightly off, just missing an equals sign after the property name.

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

This is an experimental feature. You will need to enable experimental features in Babel to get this to compile. Here is a demo with experimental enabled.

To use experimental features in babel you can install the relevant plugin from here. For this specific feature, you need the transform-class-properties plugin:

{
  "plugins": [
    "transform-class-properties"
  ]
}

You can read more about the proposal for Class Fields and Static Properties here

---

Using es6 arrow functions inside class

In your constructor you can have this.draw = () => {//} but there isn't really much point in doing this. draw(){//} should be fine for anything you want.

Below, in my example, I've shown both use cases as you can see nothing is saved by using an arrow function.

class StandardFunction {

  draw() {

    console.log('StandardFunction: you called draw')

  }

}

class ArrowFunction {

  constructor() {

    this.draw = () => {

      console.log('ArrowFunction: you called draw')

    }

  }

}

const test1 = new StandardFunction();

const test2 = new ArrowFunction();

test1.draw();

test2.draw();

Use ECMAScript 6 arrow functions as class methods

Right this is because your context is incorrect within your Promise. One method is to bind this to your Promise context. In your example you would call it like fsp.readdir('.').then(this.promiseMe.bind(this));

Alternatively, if you're using this more often, you can bind it in your constructor:

this.promiseMe = this.promiseMe.bind(this)

This will bind it in your class so that you no longer need to bind every time you call!

Arrow vs classic method in ES6 class

The feature you are using is not part of ES6. It's the class fields proposal. It allows you to initialize instance properties without having to write a constructor. I.e. your code:

class MyClass {

    myMethod = () => {
        this.myVariable++;
    }

}

is exactly the same as

class MyClass {

    constructor() {
        this.myMethod = () => {
            this.myVariable++;
        };
    }

}

And this also shows you what the difference is between a normal class method an a method created via a class field:

• A normal method is shared between all instances of the class (it is defined on the prototype)
• A "class field method" is created per instance

So all the same as reasons as presented in Use of 'prototype' vs. 'this' in JavaScript? apply, but in short:

• Use "class field methods" if you need a method per instance. Such is the case for event handlers that need to access the current instance. Access to this also only works if you are using an arrow function.
• Use normal class methods in all other cases.

Is it possible to use arrow functions in classes with ES6?

In order to do that, you'll need to add the transform-class-properties babel plugin, which allows you to have auto-bound class methods like you are attempting.

Unlike what others have just suggested, there IS value in doing this. Namely, your class function automatically has the class this bound to it, without having to manually bind it in your constructor.

Without the transform-class-properties plugin, you could do:

export default class SearchForm extends Component {

  constructor(props) {
    super(props)
    this.doSomething = this.doSomething.bind(this)
  }

  doSomething () {
    console.log(this) // <-- 'this' is the class instance
  }
}

With the plugin:

export default class SearchForm extends Component {

  doSomething = () => {
    console.log(this) // <-- 'this' is the class instance, no binding necessary
  }
}

Heres and article that explains it (among other thing) fairly well and
consisely: https://medium.com/@joshblack/writing-a-react-component-in-es2015-a0b27e1ed50a

---

Related Topics