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

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 的 addToCart 函数，但它不起作用。子组件本身的 handleClick 函数没有被调用。因此，从 handleClick 调用的父函数也没有被调用。我也不确定我所做的是否可以将方法绑定到所有按钮。请帮忙

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 方法与类的“this”绑定。正如 Chistopher 的回答，你的 onClick 是在 i 而不是在按钮上。

要么路过。

   <Product

       key={product.id}

       product={product}

       addToCart={this.addToCart}

   />

或者在状态

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