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

Question

我只是得到我的头周围的组件在reactjs。这是我组件/容器的一部分:

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

现在正常工作了，页面又出现了一个问题