反应将价值从孩子传递给另一父母的价值

Question

我在将值从名为Item的组件传递到组件NavBar时遇到问题。这棵树看起来像这样。

在Item组件中，我有一个按钮，正在调用函数handleAddToCart

<button onClick={this.handleAddToCart} style={btnStyle} className="btn btn-secondary btn-sm">ADD TO CART</button>


handleAddToCart = () => {
    console.log(this.state.price, this);
    this.props.changeValue(this.state.price)
};

在NavBar组件中，我有一个应该接收商品价格的函数

changeValue = (totalPrice) => {
    this.setState({
        totalPrice: totalPrice
    });
};

然后显示它

{this.state.totalPrice.toFixed(2)}

问题是在Item中，名为changeValue的组件函数无法识别。甚至可以直接将值直接传递给另一个孩子，而无需将其逐步传递给parent =>另一个parent => child吗？应该如何正确完成？

Answer 1

弄清楚了。 项目组件中的按钮：

onClick={() => this.props.handler(this.state.price)}

将值传递给itemsList中的项目

{this.props.items.map(item => <Item
                key={item.id}
                price={item.price}
                img={item.img}
                imgDesc={item.imgDesc}
                itemDesc={item.itemDesc}
                handler={this.props.handlePriceChange}
            />)}

应用内组件功能：

handlePriceChange = (priceValue) => {
    this.setState({totalPrice: this.state.totalPrice + priceValue});
    this.setState({totalItems: this.state.totalItems + 1});
};

并将函数传递给子项（itemsList）

<ItemsList items={this.state.items} handlePriceChange={this.handlePriceChange}/>

最后在navBar中：

Items: {this.props.totalItems}
Sum: {this.props.totalPrice.toFixed(2)}