次のReactjsコードがあります。インラインメニュー(要素のリスト)を生成します。特定の要素をクリックすると、コンソールに出力したいのですが、動作しません。ReactJS - 関数に引数を渡すときのエラー
import React from "react";
export default class GalleryHeader extends React.Component {
handleClick(cat) {
console.log(cat);
}
createItems(items) {
var output = [];
for(var i = 0; i < items.length; i++)
output.push(<li onClick={this.handleClick({items[i]})}>{items[i]}</li>);
return output;
}
render() {
return (
<ul class="list-inline">
{this.createItems(this.props.menuItems)}
</ul>
);
}
}
私は以下のように関数の引数を削除すると、それが正常に動作します
{this.handleClick({items[i]})}
関数を呼び出すにエラーがあるようです:
handleClick() {
console.log("test");
}
createItems(items) {
var output = [];
for(var i = 0; i < items.length; i++)
output.push(<li onClick={this.handleClick}>{items[i]}</li>);
お知らせください。
どのようなエラーが表示されますか? – WitVault