Javascript React父组件中的onClick事件不工作

我创建了一个react父组件，它将一些道具传递给它的子组件，并保存一个onClick函数。onClick函数应该是console.log“WORKED”，当单击产品组件时，该函数不起作用，并且控制台上没有显示任何内容。我不明白我哪里出错了，这应该很简单。我是不是犯了一个愚蠢的错误，我一直在想

这是我的父组件代码：

import React from 'react';
import { connect } from 'react-redux';
import Product from '../components/product.js';
import { bindActionCreators } from 'redux';
import { changeTotal } from '../actions/index.js';
import { selectProduct } from '../actions/index.js';

class ProductList extends React.Component {
    constructor(props) {
        super(props);

        this.state={
            total: 0
        }

        this.addFromTotal = this.addFromTotal.bind(this);
        this.subtractFromTotal = this.subtractFromTotal.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

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

    addFromTotal(product) {
        var x = Number(product.price)
        this.setState({total: this.state.total + x}, () => {
            console.log('total is ' + this.state.total);
            var total = this.state.total;
            this.props.changeTotal(total);
        });
    }

    subtractFromTotal(product) {
        var x = Number(product.price)
        this.setState({total: this.state.total - x}, () => {
            console.log('total is ' + this.state.total);
            var total = this.state.total;
            this.props.changeTotal(total);
        });
    }

    render() {
        var createProductList = this.props.products.map((product, i) => {
            return <Product
                    key={i} 
                    title={product.title} 
                    price={product.price} 
                    definition={product.definition}
                    source={product.source}
                    addFromTotal={() => this.addFromTotal(product)}
                    subtractFromTotal={() => this.subtractFromTotal(product)}
                    // onClick={() => this.props.selectProduct(product)}
                    onClick={this.handleClick}
                    />
        });
        return (
            <div>
                <div>Product List</div>
                <div style={{display: 'flex', flexDirection: 'row'}}>{createProductList}</div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        products : state.products
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ changeTotal: changeTotal }, dispatch);
}


export default connect(mapStateToProps, mapDispatchToProps)(ProductList);

从“React”导入React；
从'react redux'导入{connect}；
从“../components/Product.js”导入产品；
从“redux”导入{bindActionCreators}；
从“../actions/index.js”导入{changeTotal}；
从“../actions/index.js”导入{selectProduct}；
类ProductList扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
总数：0
}
this.addFromTotal=this.addFromTotal.bind（this）；
this.subtractFromTotal=this.subtractFromTotal.bind（this）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
console.log（'done'）
}
addFromTotal（产品）{
var x=数量（产品价格）
this.setState（{total:this.state.total+x}，（）=>{
log（'total is'+this.state.total）；
var total=this.state.total；
此.props.changecotal（总计）；
});
}
从总数（乘积）中减去{
var x=数量（产品价格）
this.setState（{total:this.state.total-x}，（）=>{
log（'total is'+this.state.total）；
var total=this.state.total；
此.props.changecotal（总计）；
});
}
render（）{
var createProductList=this.props.products.map（（产品，i）=>{
返回此.addFromTotal（产品）}
subtractFromTotal={（）=>this.subtractFromTotal（产品）}
//onClick={（）=>this.props.selectProduct（产品）}
onClick={this.handleClick}
/>
});
返回(
产品清单
{createProductList}
);
}
}
函数MapStateTops（状态）{
返回{
产品：国家产品
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{changeTotal:changeTotal}，dispatch）；
}
导出默认连接（mapStateToProps、mapDispatchToProps）（ProductList）；

以下是产品（子）组件的代码：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { updateItemObject } from '../actions/index.js'

class Product extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            counter: 0,
            itemTotal: 0
        }

        this.handleAdd = this.handleAdd.bind(this);
        this.handleSubtract = this.handleSubtract.bind(this);
    }

    handleAdd(product) {
        var x = Number(this.props.price)
        this.setState({
            itemTotal: this.state.itemTotal + x,
            counter: this.state.counter + 1
        }, () => {
            console.log('item total ' + this.state.itemTotal);
            console.log('item count ' + this.state.counter);
            this.props.addFromTotal(product);
        });
    }

    handleSubtract(product) {
        if(this.state.counter === 0) {
            return;
        }

        var x = Number(this.props.price)
        this.setState({
            itemTotal: this.state.itemTotal - x,
            counter: this.state.counter - 1
        }, () => {
            console.log('item total ' + this.state.itemTotal);
            console.log('item count ' + this.state.counter);
            this.props.subtractFromTotal(product);
        });
    }

    render() {
        return (
            <div style={{margin: '20px', backgroundColor: '#F5F5F5', cursor: 'pointer'}}>
               <div>product name: {this.props.title}</div>
               <div>product price: {this.props.price}</div>
               <div>product definition: {this.props.definition}</div>
               <div style={{
                   backgroundImage: this.props.source,
                   backgroundSize: 'cover',
                   padding: '15px',
                   margin: '15px',
                   height: '200px',
                   width: '250px' 
               }}>
               </div>
               <div>
                   <span style={{cursor: 'pointer'}} onClick={this.handleAdd}>+ </span>
                   <span style={{cursor: 'pointer'}} onClick={this.handleSubtract}>-</span>
               </div>
               <div>
                   <div>x{this.state.counter} {this.props.title} for a sum of {this.state.itemTotal}</div>
               </div>
            </div>
        );
    }
}

function mapDispatchToProps(dispatch) {
   return bindActionCreators({ updateItemObject: updateItemObject }, dispatch);
}

export default connect(null, mapDispatchToProps)(Product);

从“React”导入React；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../actions/index.js”导入{updateItemObject}
类产品扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
柜台:0,，
项目总数：0
}
this.handleAdd=this.handleAdd.bind（this）；
this.handleSubtract=this.handleSubtract.bind（this）；
}
手持式（产品）{
var x=数字（此.props.price）
这是我的国家({
itemTotal:this.state.itemTotal+x，
计数器：this.state.counter+1
}, () => {
console.log（'item total'+this.state.itemtottal）；
console.log（'item count'+this.state.counter）；
此.props.addFromTotal（产品）；
});
}
手触子管道（产品）{
if（this.state.counter==0）{
返回；
}
var x=数字（此.props.price）
这是我的国家({
itemTotal:this.state.itemTotal-x，
计数器：this.state.counter-1
}, () => {
console.log（'item total'+this.state.itemtottal）；
console.log（'item count'+this.state.counter）；
这个。道具。从总数（产品）中减去；
});
}
render（）{
返回(
产品名称：{this.props.title}
产品价格：{this.props.price}
产品定义：{this.props.definition}
+ 
-
x{this.state.counter}{this.props.title}求{this.state.itemTotal}之和
);
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{updateItemObject:updateItemObject}，dispatch）；
}
导出默认连接（空，mapDispatchToProps）（产品）；

您没有使用传递给该组件内的

产品
组件的
onClick
道具。因此，它没有被解雇。您必须将事件处理程序分配给
product
组件中的某个元素，这将触发作为prop传递给它的方法，如下所示

// Product.js component
render() {
        return (
            <div onClick={this.props.onClick} style={{margin: '20px', backgroundColor: '#F5F5F5', cursor: 'pointer'}}>
      ....

//Product.js组件
render（）{
返回(
....
您将onClick作为道具从父组件传递到子组件，但在子组件中，我没有看到您在子组件中调用props.onClick的某个单击事件。
显示
产品
组件的代码。
由于lamba的词法绑定，这不是您认为的参考ngokay，我添加了产品组件的代码！您在子组件的任何地方都不使用this.props.onClick-您希望它能像在div上单击一样工作吗？因为它不会。非常感谢，我没有意识到我必须将函数传递给子组件