用于 React NextJS 的映射对象 JSX 内的 onClick 不起作用

Question

我有一个组件：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;我在这里做错了什么？

Answer 1

您没有将点击处理程序分配给您的组件，它应该如下所示：

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;