我就直接进入正题吧。这是我在 ReactJS 应用程序中的组件:
class BooksList extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
e.preventDefault();
console.log("The link was clicked");
}
render() {
return (
<div>
<a className="btn btn-success" onClick={handleClick}>
Add to cart
</a>
</div>
);
}
}
为什么我在加载组件时会出现以下错误?
Uncaught ReferenceError: handleClick is not defined
EDIT:
在您回答后,我将代码更改为:
handleClick(e) {
e.preventDefault();
console.log("Item added to the cart");
}
renderBooks(){
return this.props.myBooks.data.map(function(book){
return (
<div className="row">
<table className="table-responsive">
<tbody>
<tr>
<td>
<p className="bookTitle">{book.title}</p>
</td>
</tr>
<tr>
<td>
<button value={book._id} onClick={this.handleClick}>Add to cart</button>
</td>
</tr>
</tbody>
</table>
</div>
);
});
}
}
render() {
return (
<div>
<div>
<h3>Buy our books</h3>
{this.renderBooks()}
</div>
</div>
);
}
正如你所看到的,我有.map
它迭代书籍列表。
对于每本书,我都有一个按钮,如果单击该按钮,则会将特定的书添加到用户的购物车中。
如果我遵循@Tharaka Wijebandara 的回答,我可以让按钮在外面工作.map
但在这种情况下我仍然收到错误:
Uncaught (in promise) TypeError: Cannot read property 'handleClick' of undefined
at http://localhost:8080/bundle.js:41331:89
at Array.map (native)
Use this.handleClick
<a className="btn btn-success" onClick={this.handleClick}>
Add to cart
</a>
并且你忘记添加e
作为你的论据handleClick
method.
handleClick(e) {
e.preventDefault();
console.log("The link was clicked");
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)