无法从 React 中的子组件调用父组件 function

Question

我是新来的反应（本周开始）。 我有一个父组件和子组件，我想在子组件中调用父方法。 我已经通过 stackoverflow 进行了搜索，我的代码与我得到的所有解决方案相同。

我有一个显示产品列表的父组件 ProductDisplay：

import React, { Component } from 'react';
import data from '../data'
import Product from '../Product/product.component'

class ProductDisplay extends Component {

    constructor(props) {
        super(props)
        this.state = {
            pdts: data,
        }
    }

    addToCart = () => {
        console.log('add to cart');
    }

    render() {
        return (            
                this.state.pdts.map(product => (
                <Product
                    key={product.id}
                    product={product}
                    addToCart={this.addToCart}
                />
            ))
        );
    }
}
export default ProductDisplay;

子组件是 Product 呈现每个产品

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import "./product.css";
class Product extends Component {
    constructor(props) {
        super(props);
    }

    handleClick = () => {
        this.props.addToCart();
        console.log('click');
    }

    render() {
        const product = this.props.product;
        console.log(this.props.addToCart);
        return (
            <div className="product">
                <img className="image" src={product.imgPath} alt={product.name} />
                <p className="name">{product.name}</p>
                <p className="price">Price: ₹{product.price}</p>
                <p className="category">Category: {product.category}</p>
                <button className="add">Add To Cart <i className="fa fa-cart-plus" 
                        onClick={this.handleClick}></i></button>
            </div>
        );
    }
}
export default withRouter(Product);

我想在单击按钮时从 Product 调用 ProductDisplay 的 function addToCart 但它不起作用。 子组件本身的 handleClick function 没有被调用。 因此，从 handleClick 调用的父 function 也没有被调用。

我也不确定我所做的是否可以将方法绑定到所有按钮。 请帮忙

Answer 1

您已将onClick侦听器放在<i>标记上，而不是实际button上，这就是为什么单击button时它不会触发任何内容的原因。

试试这个：

<button 
    className="add" 
    onClick={this.handleClick}
>
    Add To Cart <i className="fa fa-cart-plus"></i>
</button>

Answer 2

您需要将 addCart 方法与 class 的“this”绑定。 而作为 Chistopher 的回答，您的 onClick 位于 i 而不是按钮上。

要么在路过。

   <Product
       key={product.id}
       product={product}
       addToCart={this.addToCart}
   />

或在 state

this.addToCart = this.addToCart.bind(this);