如何访问内部函数是函数内部地图

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，很明显）。