为每个表行反应 onclick [重复]答案

【问题标题】：React onclick for each table rows [duplicate]为每个表行反应 onclick [重复]
【发布时间】：2018-10-25 03:54:42
【问题描述】：

我有一些数据可以通过 .map() 打印出来喜欢这段代码

tabRow(){
   // CSS style for font Icon 
  const editIcon = {
    color: 'blue',
    fontSize: '1.3em',
    padding: '0 5px',
  };
  const trashIcon = {
    color: 'red',
    fontSize: '1.3em',
    padding: '0 5px',
  };
 if(this.state.products instanceof Array){
   return this.state.products.map(function(object, i){
       return(
        <tr key={ i }>
            <td>{ object.id }</td>
            <td>{ object.title }</td>
            <td>{ object.body }</td>
            <td width="200px">
          <Icon name="edit" onClick={() => this.handleClick(i)} style={editIcon}
           className="editIconClass" />
          <Icon name="trash" style={trashIcon} className="trashIconClass" />
        </td>
        </tr>
      )
   })
 }
}

我在表体中使用tabRow()

<tbody>
   {this.tabRow()}
</tbody>

我也有简单的登录 handleClick() 并且我在构造函数 this.handleClick = this.handleClick.bind(this); 中绑定了这个代码我可以看到我的视图但是当我点击运行函数时我得到了这个错误：

Uncaught TypeError: Cannot read property 'handleClick' of undefined
    at onClick (app.js:61529)
    at HTMLUnknownElement.callCallback (app.js:40524)
    at Object.invokeGuardedCallbackDev (app.js:40562)
    at Object.invokeGuardedCallback (app.js:40611)
    at Object.invokeGuardedCallbackAndCatchFirstError (app.js:40625)
    at executeDispatch (app.js:40890)
    at executeDispatchesInOrder (app.js:40912)
    at executeDispatchesAndRelease (app.js:41010)
    at executeDispatchesAndReleaseTopLevel (app.js:41021)
    at forEachAccumulated (app.js:40991)

我应该怎么做才能解决它？

And my App.js file looks like this
require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';


import Master from './components/Master';
import CreateProduct from './components/CreateProduct';
import DisplayProduct from './components/DisplayProduct';
import UpdateProduct from './components/UpdateProduct';


render(
  <Router history={browserHistory}>
      <Route path="/" component={Master} >
        <Route path="/add-item" component={CreateProduct} />
        <Route path="/display-item" component={DisplayProduct} />
        <Route path="/edit/:id" component={UpdateProduct} />
      </Route>
    </Router>,
        document.getElementById('root'));

还有我的handleClick

handleClick(i){
  console.log('Click happened', i);
}

【问题讨论】：

如果您发布整个 app.js 会更好
@ShivaSai 我更新了我的问题
@NAK.dev 我很抱歉.. 我的意思是你使用你的 handleClick.. 而不是 app.js 的组件。

标签： javascript jquery reactjs function bind

【解决方案1】：

你不能直接在map函数中访问这个，你应该绑定它。您可以通过多种方式做到这一点。例如，您可以使用箭头函数。这应该是您案例的代码：

return this.state.products.map((object, i) => (
     <tr key={ i }>
       ...
     </tr>
   ))

您还可以添加this 作为映射函数as described here 的第二个参数。

【讨论】：

谢谢它的工作。