gpt4 book ai didi

javascript - 对每个表行 react onclick

转载 作者:行者123 更新时间:2023-11-30 11:19:27 24 4
gpt4 key购买 nike

<分区>

我有一些数据可以通过 .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() 中进行了简单登录,并且在构造函数中绑定(bind)了此代码 this.handleClick = this.handleClick.bind(this); 我可以看到我的 View ,但是当我点击运行功能时,我得到了这个错误:

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);
}

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com