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

Posted 2021-04-20

我创建了一个反应父组件，它将一些道具传递给它的子组件，并保存一个onClick函数。当点击一个Product组件时，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);

这是Product（子）组件的代码：

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

答案

您没有使用传递给该组件内部的onClick组件的product道具。因此它没有被解雇。你必须将事件处理程序分配给product组件中的某个元素，这将触发传递给它的方法作为这样的支柱

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

另一答案

你传递onClick作为从父组件到子组件的道具，但在子组件中我没有看到你的调用props.onClick子组件中的一些点击事件。