如何訪問內部函數是函數內部地圖

Question

我努力讓自己在這樣.MAP方法的每一個項目的onClick效果的內部狀態：

this.props.products.map(function(item, i) { return ( <tr key={ i } onClick={ function() { console.log(arrayForOnClick) arrayForOnClick = [item['id'], item['name'], item['price']] this.handleTableString(item['id'], item['name'], item['price']) // Нужно передать айди, имя и цену в модальное окно при клике на этот <tr>. } }> <td>{ item['id'] }</td> <td>{ item['name'] }</td> <td>{ item['price'] }</td> </tr> ) }, this) 我試圖訪問此。 handleTableString這是

handleTableString(id, name, price) { this.setState({ editProductModal: true, selectedId: id, selectedName: name, selectedPrice: price }) console.log('triggered') }

，但我得到的錯誤Uncaught TypeError: Cannot read property 'handleTableString' of null 是否有另一種方法，使的onClick什麼是錯我的代碼？

Answer 1

的問題是，this是每個function不同（它不保存您的嵌套函數）。你可以。

1. 使用變量保持參考this。

。

this.props.products.map(function(item, i) { 

    const self = this; 
    return (
    <tr key={ i } onClick={ function() { 
     console.log(arrayForOnClick) 
     arrayForOnClick = [item['id'], item['name'], item['price']] 
     self.handleTableString(item['id'], item['name'], item['price']) 
     // Нужно передать айди, имя и цену в модальное окно при клике на этот <tr>. 
     } }> 
     <td>{ item['id'] }</td> 
     <td>{ item['name'] }</td> 
     <td>{ item['price'] }</td> 
    </tr> 
) 
}, this) 

使用arrow functions不結合this，所以它是在父上下文查找。

。

this.props.products.map(function(item, i) { 
    return (
    <tr key={ i } onClick={() => { 
     console.log(arrayForOnClick) 
     arrayForOnClick = [item['id'], item['name'], item['price']] 
     this.handleTableString(item['id'], item['name'], item['price']) 
     // Нужно передать айди, имя и цену в модальное окно при клике на этот <tr>. 
     } }> 
     <td>{ item['id'] }</td> 
     <td>{ item['name'] }</td> 
     <td>{ item['price'] }</td> 
    </tr> 
) 
}, this) 

Answer 2

不要像正在做的那樣創建匿名函數，而沒有正確綁定上下文。它的清潔劑使用箭頭功能在這種情況下也：

this.props.products.map(function(item, i) { 
    return (
    <tr key={ i } onClick={() => { 
     const arrayForOnClick = [item['id'], item['name'], item['price']] 
     this.handleTableString(item['id'], item['name'], item['price']) 
     } }> 
     <td>{ item['id'] }</td> 
     <td>{ item['name'] }</td> 
     <td>{ item['price'] }</td> 
    </tr> 
) 
}, this) 

Answer 3

的問題是，this是你onClick inline函數裏面空。因此，您需要將onClick指定爲使用javascript bind方法明確設置了this的函數。

<tr key={ i } onClick={ 
    function() { 
    console.log(arrayForOnClick) 
    arrayForOnClick = [item['id'], item['name'], item['price']] 
    this.handleTableString(item['id'], item['name'], item['price']) 
    }.bind(this) 
}> 
... 
</tr> 

Answer 4

在JavaScript this內部函數可以綁定到god-know-what，這取決於它如何被調用。在您的代碼this行this.handleTableString(item['id'], ...沒有指向組件。

使用ES6 arrow functions爲您處理程序都在的情況下map和onClick或使用this-that trick你不得不使用ES5語法和不能/不想使用transpilers（Babel，很明顯）。