反応キー入力コンポーネントを使用しようとするとエラーが発生する

Question

現在、反応キー入力コンポーネントは、react-keydown componentのドキュメントのように使用しようとしています。次のように私のコードでは、なります。私は取得しています

import React, { PropTypes } from 'react'; 
import keydown, { Keys } from 'react-keydown'; 

const propTypes = { 
    onNewGame: PropTypes.func.isRequired 
}; 

export default class Home extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    @keydown('enter') 
    submit(event) { 
    console.log('clicked'); 
    } 


render() { 
    return (
    <div> 
     <div className="img-margin"> 
     <div className="margin"> 
      <img alt="" src="/assets/logo/logo_blank.png"/> 
     </div> 
     </div> 
    </div> 
); 
}} 

Home.propTypes = propTypes; 

エラーは次のとおりです。

Module build failed: SyntaxError: Method has decorators, put the decorator plugin before the classes one. 

私はバベル-プラグイン・変換・デコレーターインストールし、私の.babelrcでそれを含めました。助けてくれてありがとう。

Answer 1

あなたは間違った例を考えていました。クラスを使用している場合は、クラス外にデコレータを配置する必要があります。 https://www.npmjs.com/package/react-keydown#for-classes-pass-keydown-events-into-your-component

//Move decorator above class 
@keydown 
class MyComponent extends React.Component { 
    componentWillReceiveProps({ keydown }) { 
    if (keydown.event) { 
     // inspect the keydown event and decide what to do 
     console.log(keydown.event.which); 
    } 
    } 

    render() { 
    return (
     <div>keydown events will only get passed down after this DOM node mounts or is clicked on</div> 
    ); 
    } 
} 

export default MyComponent;