是否可以在ES6的类中使用箭头功能？ [英] Is it possible to use arrow functions in classes with ES6?

问题描述

我的问题非常简单。如果我在ES6中有一个类可以在其中使用箭头函数吗？

My question is very simple. If I have a class in ES6 is it possible to use an arrow function within it?

import React, { Component } from 'react';

export default class SearchForm extends Component {

  state = {
    searchText: ''
  }

  onSearchChange = e => {
    this.setState({ searchText: e.target.value });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.onSearch(this.query.value);
    e.currentTarget.reset();
  }

  render() {
    return (
      <form className="search-form" onSubmit={this.handleSubmit} >
        <label className="is-hidden" htmlFor="search">Search</label>
        <input type="search"
               onChange={this.onSearchChange}
               name="search"
               ref={(input) => this.query = input}
               placeholder="Search..." />
        <button type="submit" id="submit" className="search-button">
          <i className="material-icons icn-search">search</i>
        </button>
      </form>
    );
  }
}

我问的原因是我收到错误我的控制台，即使使用Babel。互联网上似乎有很多资源说明你可以做到这一点（其中大部分是关于使用React进行开发）。

The reason I ask is that I get an error in my console, even when using Babel. It seems like there's a lot of resources on the internet stating you can do this (most of which are about developing with React).

这是Babel应该做的事情，并且最终会得到原生支持吗？

Is this something that Babel should do, and will eventually become natively supported?

我得到的错误是一个意外的=符号，就在parens之前。

The error I get is an unexpected = sign, just before the parens.

编辑：我忘了提及，我希望这样做的原因是在类的上下文中使用 this 关键字。如果我使用常规函数 - 据我所知 - 我必须将此绑定到该函数。我正在努力寻找一种更好的方法。

I forgot to mention, the reason I wish to do this is to make use of the this keyword in context of the class. If I use a regular function - to my understanding - I would have to bind this to the function. I'm trying to look for a nicer way of doing that.

推荐答案

为了做到这一点，你需要添加 transform-class-properties babel插件，它允许您使用自动绑定的类方法，就像您正在尝试的那样。

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.

没有 transform-class-properties 插件，你可以这样做：

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
  }
}

使用插件：

export default class SearchForm extends Component {

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

Heres和文章相当好地解释了它（以及其他内容）和
： https://medium.com/@joshblack/writing-a-react-component-in-es2015-a0b27e1ed50a

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

这篇关于是否可以在ES6的类中使用箭头功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！