无法让onClick={}与.map()生成的组件一起工作。

Question

我不知道这是否超级简单，但我无法解决这个问题。

试图将onClick附加到一个组件上--这些都能很好地渲染，因为我正在将颜色传递给子组件（使用teh颜色道具）。我试着连接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>
        )
    }
}