Reduxのは、だから私は<a href="http://redux-form.com/6.5.0/docs/GettingStarted.md/" rel="nofollow noreferrer">getting started guide for Redux Form</a>を以下だし、私はこれにつまずいてきた奇妙な矢印関数の構文

Question

を形成：

handleSubmit = (values) => { ... }

直感的に、私はそれがこのような単純なものにコンパイルと思うだろう：

function handleSubmit(values) { ... }

しかし、そうではありません。現実には、それはこれにコンパイルされます。

handleSubmit = function handleSubmit(values) { ... };

これは私のJSlintはしかし、（error Parsing error: Unexpected token =）夢中になります。コンパイルされたJSを代わりに使用するなど、これを書き換えるさまざまな方法を試しましたが、私はこれを行うときに小道具にアクセスできないのでエラーが発生します。

何か起こっていることを誰かに説明することはできますか？私はコンパイルJSを使用するときにここで

は、スタックトレースです：

Uncaught TypeError: Cannot read property 'props' of undefined 
    at handleSubmit (create.js:17) 
    at doSubmit (handleSubmit.js:42) 
    at handleSubmit.js:107 
    at handleSubmit (handleSubmit.js:110) 
    at Form.submit (reduxForm.js:540) 
    at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:70) 
    at executeDispatch (EventPluginUtils.js:85) 
    at Object.executeDispatchesInOrder (EventPluginUtils.js:108) 
    at executeDispatchesAndRelease (EventPluginHub.js:43) 
    at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54) 

そして、ここでは私のEslintの設定と要旨です：

私はhandleSubmit機能するリンクで見

https://gist.github.com/webconsult/62bfa93054f261d92c186d39635f743c

Answer 1

<ContactForm onSubmit={this.handleSubmit} /> 

したがって、表記法を使用する場合は、ContactFormコンポーネントから呼び出される関数定義のみを渡しています。この場合、ContactFormを宣言したコンポーネント（この例ではContactPage）で 'this'キーワードがスコープされないため、そのプロップにアクセスすることはできません。あなたは関数定義が、それのインスタンスを渡していないので、これはインスタンス化機能を持つクラスのプロパティを作成すると、矢印記法

handleSubmit = (values) => { ... } 

を使用して

は、これを解決します。矢印関数が 'this'キーワードの有効範囲を保持するので、handleSubmitが呼び出されると 'this'が正しくスコープされ、コールバックを定義したコンポーネントの小道具にアクセスできます。 ContactFormに渡すときに、同じではなく、プロパティのクラスメソッドとしてハンドラを宣言、それに範囲を結合達成することができることを

注：

class ContactPage extends React.Component { 
    handleSubmit(values) { 
    // Do something with the form values 
    console.log(values); 
    } 
    render() { 
    return (
     <ContactForm onSubmit={this.handleSubmit.bind(this)} /> 
    ); 
    } 
}