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) 我正在尝试访问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->snows

Answer 2

问题是this对于每个function都不同（它不会为您的嵌套函数保留）。你可以。

使用变量来保留对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)

使用不绑定this的{{3}}，以便在父上下文中查找。

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 3

问题是this内联函数中onClick为空。因此，您需要将onClick分配给使用javascript this方法明确设置bind的函数。

<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语法，并且可以＆＃t; t / don＆＃ 39;显然想要使用转发器（Babel）。

如何访问map中函数内部的状态函数

4 个答案: