web-dev-qa-db-ja.com

ES6のクラスで矢印関数を使用することは可能ですか？

私の質問はとても簡単です。 ES6にクラスがある場合、その中で矢印関数を使用することはできますか？

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での開発に関するものです）。

これはバベルがすべきことであり、最終的にはネイティブにサポートされるようになるのでしょうか。

私が得るエラーは、親の直前の予期しない=記号です。

EDIT：言及するのを忘れました。これを実行したい理由は、クラスのコンテキストでthisキーワードを使用するためです。通常の関数を使用する場合（私の理解では）、thisを関数にバインドする必要があります。私はそれを行うためのより良い方法を探しています。

javascriptclassecmascript-6arrow-functions
10
tomhughes

これを行うには、transform-class-properties babelプラグインを追加する必要があります。これにより、試行しているように自動バインドされたクラスメソッドを使用できます。

他の人が提案したものとは異なり、これを行うにはIS値があります。つまり、クラス関数は、手動でバインドしなくても、クラスthisが自動的にバインドされます。コンストラクタ。

transform-class-propertiesプラグインがないと、次のことができます。

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

こことそれを（とりわけ）かなりよくそして簡潔に説明する記事： https://medium.com/@joshblack/writing-a-react-component-in-es2015-a0b27e1ed50a

14
Logic Artist

はい、ES6クラス内で矢印関数を使用することは可能です。コンストラクター内でsuperを呼び出していないことに気付きました。コンストラクターを拡張してオーバーライドする場合は、呼び出す必要があります。

コードがES5に正しくコンパイルされることを除いて、これをチェックアウトしてください link サンプルコードを含むオンラインのBabelトランスパイラーに。

これをチェックしてください 質問 あなたと同じです。

0
Tekeste Kidanu

はい、可能です。コードは機能するはずです。Babelの設定を確認する必要があります。設定方法に問題があるはずです。

あなたの例では、doSomethingは実際にはクラスのプロパティです。プロパティのタイプは関数です。これは、メソッドとthisキーワードの使用を追加で示す例です。

class SearchForm {

  doSomething = () => {
    console.log('I am a property')
  }

  doSomethingElse() {
    console.log('I am a method')
  }

  doBoth() {
    this.doSomething();
    this.doSomethingElse()
  }
}

const form = new SearchForm();
form.doBoth();

あなたはそれをライブでチェックすることができます ここ 。

0
m1kael