React.js ES6 avoid binding ‘this’ to every method

by

You can use class fields to do the binding outside the constructor. They look like the following:

class Foo extends React.Component {

  handleBar = () => {
    console.log('neat');
  };

  handleFoo = () => {
    console.log('cool');
  };

  render() {
    return (
      <div
        onClick={this.handleBar}
        onMouseOver={this.handleFoo}
      />
    );
  }

}

Class fields are supported experimentally by Babel via its class properties transform, but they are still “experimental” because they are a Stage 3 Draft (not yet in a Babel preset).

You will need to do the binding manually until ES7 or until enabling the feature in Babel, however. This topic is covered briefly in Babel’s blog post on React on ES6+.

More Related Contents:

  1. setState doesn’t update the state immediately
  2. How to update nested state properties in React
  3. Unable to access React instance (this) inside event handler [duplicate]
  4. Adding script tag to React/JSX
  5. How to scroll to an element?
  6. When to use ES6 class based React components vs. functional ES6 React components?
  7. Why and when do we need to bind functions and eventHandlers in React?
  8. What does three dots do in ReactJS [duplicate]
  9. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  10. How to add multiple classes to a ReactJS Component?
  11. React useState hook event handler using initial state
  12. Can I use arrow function in constructor of a react component?
  13. Active link with React-Router?
  14. When should I use brackets with imports
  15. ES6 array map doesn’t return anything: ReactJS
  16. setState() inside of componentDidUpdate()
  17. Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
  18. Why React Hook useState uses const and not let
  19. where is create-react-app webpack config and files?
  20. Unable to use Arrow functions inside React component class [duplicate]
  21. Best way to polyfill ES6 features in React app that uses create-react-app
  22. Importing multiple files in react
  23. React.createClass vs. ES6 arrow function
  24. How do you import a javascript package from a cdn/script tag in React?
  25. Error: How to serialize data from getStaticProps : Next.js
  26. What do curly braces mean in JSX (React)?
  27. Update one of the objects in array, in an immutable way
  28. How to namespace es6 classes (for React components)
  29. React functional component default props vs default parameters
  30. Exporting functions with reactjs and babel

Leave a Comment