矢印機能はどのように動作させることができますか？

Question

ES6の周り私の頭を取得し、どのように矢印の関数を作成するために思っていたことができますデバッグ：

私はこれがトリガされたかどうかを確認するために、ここではconsole.logを置くことができますどのように

<button onClick={() => this.setState({open: !open})}>Toggle</button> 

？

Answer 1

ブレース{}は、コードブロックを持つ矢印機能に使用します。

<button onClick={() => {console.log('hello');this.setState({open: !open})}}>Toggle</button> 

は

<button onClick={() => { 
     console.log('hello'); 
     this.setState({open: !open}) 
    }}> 
     Toggle 
    </button> 

このことができます希望を書式付き！

Answer 2

さてあなたはそれがconsole.logsと状態を設定する別の関数、呼び出し作ることができます：

<button onClick={this.potato}>Toggle</button> 

function potato() { 
    console.log('bombs away'); 
    this.setState({open: !open}) 
} 

それとも、状態を更新するたびに、それがトリガーするので、あなたは、レンダリング機能にprint文を入れることができます再レンダリング

Answer 3

コードは有効なHTMLではありません。 onClick属性の値は、文字列にする必要があるので、それは単に何もしません関数宣言を実行するため

<button onClick="() => this.setState({open: !open})">Toggle</button> 

はしかし、これも、何もしませんでなければなりません。あなたは、おそらく今ではconsole.logに固執するのは簡単十分だ

<button onClick="this.setState({open: !open})">Toggle</button> 

をしたい：

<button onClick="console.log("here!"); this.setState({open: !open})">Toggle</button> 

はもちろん、あなたがとにかく物事をこの方法を行うにはないことをお勧めします。イベントハンドラを設定するには、addEventListenerを使用する必要があります。

const handler =() => { console.log("here"); this.setState({open: !open}); }; 

：だから、それはあなたが別の答えで述べたように、handlerにはconsole.logを追加したい場合は、あなたが（中括弧なし）簡潔なボディフォームを放棄するか

const handler =() => this.setState({open: !open}); 
button.addEventListener('click', handler); 

可能性があり

が

const handler =() => (console.log("here"), this.setState({open: !open})); 

次のイディオムも有用代されています：

一般的にお勧めできませんが、または、あなたはカンマ演算子を使用することができます

const handler =() => console.log("here") || this.setState({open: !open}); 

console.logがundefinedを返すため動作します。こうすることで、中括弧や括弧を修正することを心配することなく、単に文字console.log("here") ||を削除するだけでログを削除することができます。