React組件如何簡化這個onClick函數？

Question

這不是一個真正的React特定問題，但我認爲它有助於瞭解上下文。在一個組件中，我生成了一些表格行。每行都需要一個onClick函數，它將id傳遞給組件handleUnlink方法。

我得到它與下面的代碼一起工作，但它讓我的頭旋轉了一下，我有一種感覺，這可以用更簡單的方式完成。我對嗎？

var fn = function(id){ 
    return function(){ 
    this.handleUnlink(id); 
    }.bind(this); 
}.bind(this); 

var linkedListHtml = this.state.linkedList.map(p => { 
    return(
    <tr key={p.id}> 
    <td>{p.name}</td> 
    <td><mui.Icon icon='action-highlight-remove' onClick={fn(p.id)}/></td> 
    </tr>); 
}); 

Answer 1

Function.prototype.bind()也做的任何額外的參數部分應用程序，那麼你應該能夠做到這一點，而不是：

onClick={this.handleUnlink.bind(this, p.id)} 

---

獎勵：，如果你的this參數bind()是多餘的'使用React.createClass()來創建你的組件，因爲它爲你自動綁定方法，所以我通常最終編寫了一個partial幫手：

'use strict'; 
var slice = Array.prototype.slice 
function partial(fn) { 
    var partialArgs = slice.call(arguments, 1) 
    return function() { 
    return fn.apply(this, partialArgs.concat(slice.call(arguments))) 
    } 
} 
module.exports = partial 

...

var partial = require('./utils/partial') 
// ... 
onClick={partial(this.handleUnlink, p.id)}