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);

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

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);