正しい方法は

Question

まず

<div tabIndex="0" 
    onKeyPress={this.onHandleClick.bind(null, 'first')} 
    onClick={this.onHandleClick.bind(null, 'first')}> 

セカンド

onHandleClick = (event) => { 
    $(event.currentTarget).data('circle') 
} 
<div tabIndex="0" 
    data-circle="first" 
    onClick={this.onHandleClick}> 

をクリックするこれを行うにはそこに別の方法は、クリーンで正しい方法thatsのですか？これらの両方は、ハックのように感じます：特にJSX内のバインドを使用します。

Answer 1

あなた自身が遭遇するかもしれない別の状況は、コールバック内に正しい "this"ポインタ、いくつかの任意のパラメータ、およびイベントオブジェクト自体が必要なことです。その場合、次のようなことができます：

<button onClick={(event) => this.handleAction('arbitrary-data', event)}> ... </button> 

handleAction(data, event) { 
    event.preventDefault() 
    // this.state.something 
    console.log(`data ${data}`) 
} 

Answer 2

何がしたいことは、単純に、通常それを呼び出すと、関数が機能を返す必要があり、あなたのonClickハンドラにパラメータを渡すことである場合：

onClick={this.onHandleClick('first')}

onHandleClick(value) { 
    return function() { 
     // logic that now has access to `value` 
    } 
} 

作品ばかりだけでなく、結合、かもしれませんもう少し明確です。 jqueryに依存するよりはるかに優れています。