Javascript 单击映射对象JSX内部的onClick，以确定React NextJS不工作

我有一个组成部分：

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元素上，它实际上会将它们应用于元素。对于自定义组件，实际上必须在组件内手动应用它们。