如何在 Reactjs 中触发组件上的方法？

Question

我刚刚开始了解 reactjs 中的组件。这是我的一部分 component/container:

onAddToCart(id) {
                console.log('testing onaddtocart')
                this.props.dispatch({type: 'ADD_TO_CART', id: id});
            }
        
render() {
        
                var Packs = [];
                if (this.props.packsData != undefined && this.props.packsData.existingFoxtelPackage != undefined) {
                    if (this.props.packsData.existingFoxtelPackage.eligiblePacks.length > 0) {
                        Packs = this.props.packsData.existingFoxtelPackage.eligiblePacks;
                        console.log('testing=Packs', Packs);
                    }
                }
        
                return (
                    <div>hello from Packscontainer!!!
        
                        <div>
                            {
                                Packs.map(pack =>
                                    <Pack id={pack.id} name={pack.name} addToCart={this.onAddToCart.bind(this, pack.id)}/>
                                )}
                        </div>
                    </div>
                )
}

问题是单击 addToCart 按钮时未触发 onAddToCart 方法，这是 Pack 组件的一部分：

 render() {
        const { addToCart } = this.props
        return (
            <div>hello from pack
                {this.props.id} - {this.props.name}

                <button onClick={addToCart}>Add to cart</button>
            </div>
        )
    }

如何触发容器中的onAddTocart方法？

Answer 1

现在可以正常使用，但页面出现另一个问题

如何在 Reactjs 中触发组件上的方法？

How can I trigger the method on the component in Reactjs?

reactjs

react-redux