Не удается заставить onClick = {} работать с компонентом, созданным .map ()

Question

Я не уверен, что это очень просто, но я не могу понять этого!

Пытаюсь прикрепить onClick к компоненту - они отображаются нормально, поскольку я передаю цвет ребенку (используя цветную опору). Я пробовал подключить onClick и протестировать с помощью простого console.log (), но не могу заставить его работать.

Я просто веду себя глупо и упускаю что-то глупое простое? ценю любую помощь

import React, { Component } from 'react'
import './ColourBoxes.css'
import Box from './Box'

    class ColourBoxes extends Component {
        constructor(props) {
            super(props)
            this.state = {
                boxColours: this.props.boxCount.map(box => [this.randColour()])

            }

            this.randColour = this.randColour.bind(this)
            // this.newColour = this.newColour.bind(this)
            this.handleClick = this.handleClick.bind(this)

        }

        static defaultProps = {
            colours: ['#ff3860', '#498afb', '#fa8142', '#09c372', '#9166cc', '#ffdd57', '#ff4088'],
            boxCount: [...new Array((20))]
        }

        randColour() {
            const ranIdx = Math.floor(Math.random() * this.props.colours.length)
            return this.props.colours[ranIdx]
        }
        newColour(oldColour) {
            const idx = this.state.boxColours.indexOf(oldColour)
            const currColours = [...this.state.boxColours]

            this.setState(st => {return {boxColours: currColours[idx] = this.randColour()}})


        }

        handleClick () {
            console.log('working')
        }

        render() {
            return(
                <div className="ColourBoxes">
                    {this.state.boxColours.map( (box) => <Box colour={box} onClick={this.handleClick}/>)}
                </div>
            )
        }
    }

    export default ColourBoxes

Answer 1

Опора onClick изначально работает только для html элементов, если вы создаете новый компонент React, вы сами отвечаете за реализацию обратного вызова.

Итак, внутри своего класса Box вы можете сделать что-то вроде этого:

export default class Box extends Component {
    render() {
        return (
            <div onClick={this.props.onClick}>Div inside Box</div>
        )
    }
}