Javascript 单击映射对象JSX内部的onClick,以确定React NextJS不工作
我有一个组成部分:Javascript 单击映射对象JSX内部的onClick,以确定React NextJS不工作,javascript,reactjs,next.js,Javascript,Reactjs,Next.js,我有一个组成部分: import React, { Component } from 'react'; import ImageItem from '../components/ImageItem'; class ImageList extends Component { handleClick() { console.log('Testing testing...'); // ---> This is not working. } render
import React, { Component } from 'react';
import ImageItem from '../components/ImageItem';
class ImageList extends Component {
handleClick() {
console.log('Testing testing...'); // ---> This is not working.
}
render() {
const images = this.props.images.map(image => {
return (
<ImageItem
onClick={this.handleClick}
key={image.id}
image={image.src}
title={image.title}
/>
);
});
return (
<div className="image-list" ref={el => (this.el = el)}>
{images}
</div>
);
}
}
export default ImageList;
但是,当onClick位于映射函数内时,它不会将任何内容注销
这是我的ImageItem组件:
import React, { Component } from 'react';
class ImageItem extends Component {
render() {
return (
<a href="#">
<img
className="portfolio-image"
src={this.props.image}
alt={this.props.title}
/>
</a>
);
}
}
export default ImageItem;
我做错了什么?您没有将单击处理程序分配给组件,它应该是这样的:
class ImageItem extends Component {
render() {
return (
<a href="#" onClick={this.props.onClick}>
<img
className="portfolio-image"
src={this.props.image}
alt={this.props.title}
/>
</a>
);
}
}
export default ImageItem;
请看,您可以将此作为第二个参数传入,以便在map函数中使用它。@RutherfordWonkington但是您可以看到我的代码,我已经在这里使用了arrow函数。所以“this”的上下文不应该是问题。您可以发布ImageItem组件吗?True。如果它是一个上下文问题,您可以转换为一个功能组件,并且完全不必参考它,这至少可以告诉你这是否是它不启动的原因。@Jake更新了我的问题,同时显示了我的ImageItem组件。但是为什么我不能直接在父组件上使用onClick?因为onClick不是自定义组件的本机道具。当在自定义组件上使用时,它就像任何其他道具一样,在您实际使用/分配它之前不会执行任何操作。@Jayce444 aaah ok!因此,对于所有本机组件(其他jsx html元素),它就像本机组件一样工作?@Jake谢谢你的回答。我知道父母可以像这样传递道具,但没有想到这一点,因为onClick我认为它是所有组件的本机@SankalpSingha correct,与className或id等道具相同。在div和span等传统HTML元素上,它实际上会将它们应用于元素。对于自定义组件,实际上必须在组件内手动应用它们。