javascript - React 父组件中的 onClick 事件不起作用

Question

我创建了一个 React 父组件，它将一些 Prop 传递给它的子组件，并包含一个 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);

Answer 1

您没有在该组件内使用传递给 product 组件的 onClick Prop 。因此它没有被解雇。您必须将事件处理程序分配给 product 组件中的某个元素，这将触发传递给它的方法作为 prop 之类的东西

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