在JSX來傳遞數據的正確方法點擊

首先在JSX來傳遞數據的正確方法點擊

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

是否有另一種方式做到這一點這就是清潔，正確的方法是什麼？這兩種感覺都像黑客：特別是在JSX中使用綁定。

來源

2016-04-11 azz0r

第一個是純React和Javasctipt的解決方案，這是很好的。第二個解決方案可以工作，但我覺得沒有必要在這裏使用jQuery –

好吧，我們將堅持第一種方式:) – azz0r

可以'bind'因爲：「在JavaScript中創建回調時，通常需要顯式地將一個方法綁定到它的實例，使得這個值是正確的。使用React，每個方法都會自動綁定到它的組件實例。「 [更多]（https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation） –

您可能遇到的另一種情況是您的回調中需要正確的「this」指針，一些任意參數和事件對象本身。在這種情況下，你可以這樣做：

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

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

來源

2016-04-12 04:39:55

如果你想要的是將參數傳遞給你的onClick處理程序，只需正常地調用它，並且有函數返回一個函數：

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

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

作品一樣好，裝訂，可能是更清楚一點。絕對比取決於jquery更好。

來源

2016-04-11 14:09:34 ZekeDroid

在JSX來傳遞數據的正確方法點擊

回答

相關問題