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而非按钮上。

在通过时。

3.0.0

或处于状态

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

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

2 个答案: