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;

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

1 个答案: