Javascript React JS-子级和父级之间的通信以及双重事件

我在申请时遇到了一个问题 用于React中某些产品的价格计算。以下是我的应用程序的外观：

我现在需要的是ListItem组件的部分总和的全局总和，但我不知道如何使用React实现这一点。我尝试使用最小组件ListItem的相同onChange事件在父级上触发事件，如：

handleChange:function(event){

  this.props.onChange(event.target);

  const target = event.target;
  const name = target.name;
  const value = target.value;

  this.setState({
    [name]: value
  });
},

但通过这种方式，只有此事件被触发，并且没有更新状态。 也许我遗漏了什么

重述一下，我需要的是在父组件表中传递ListItem中计算的部分总计，以便计算全局总计

函数头{ 回来 卡尔科洛科斯托普罗多蒂酒店 } var ListItem=React.createClass{ getInitialState:函数{ 返回{name:this.props.value.product.name，costo:this.props.value.product.costo，quantita:this.props.value.product.quantita，totale:0} }, 渲染：函数{ 回来 {this.calcoloTotale} }, handleChange:functionevent{ const target=event.target； const name=target.name； 常量值=target.value； 这是我的国家{ [名称]：值 }; }, calcoloTotale：函数{ var Ltotale=this.state.costo*this.state.quantita； this.setState{totale:Ltotale}； 返回信号； } }; var Table=React.createClass{ getInitialState:函数{ 返回{totale:0} }, 渲染：函数{ 回来 诺姆 前奏曲 定量 总计 {this.props.items.mapprodotto=> } } }; var AddNewRow=React.createClass{ 渲染：函数{ 回来 + 阿吉恩吉·普罗多托 } }; 变量计算器=React.createClass{ getInitialState:函数{ 返回{ 计数器：2，列表：[{id:0，产品：{name:Esempio 1，costo:25，quantita:3}，{id:1，产品：{name:Esempio 2，costo:32，quantita:4}] } }, 渲染：函数{ 回来 }, addRow:函数{ this.setState{counter:this.state.counter+1}； var listItem={id:this.state.counter，产品：{name:，costo:，quantita:}； var allItem=this.state.lists.concat[listItem] this.setState{lists:allItem}； } }; ReactDOM.render , 文件正文 ; 我想这是为你做的

它帮助您在不一定具有子/父关系的组件之间传递属性。基本上，它创建了一个可以从任何地方访问的全局状态

关于redux有很多要说的，我们没有任何理由称之为react/redux，如果你想用react做一些强大的事情，这是必须的

---

您可以在Redux文档中找到更多信息

您可以在父级中添加一个函数来更改该组件的状态，然后将该函数作为道具发送给子级

var ListItem=React.createClass{ getInitialState:函数{ 返回{name:this.props.value.product.name，costo:this.props.value.product.costo，quantita:this.props.value.product.quantita，totale:0} }, ... calcoloTotale：函数{ var Ltotale=this.state.costo*this.state.quantita； this.props.updateGlobalTotalTotal； this.setState{totale:Ltotale}； 返回信号； } }; var Table=React.createClass{ getInitialState:函数{ 返回{totale:0} }, updateGlobalTotal:functionvalue{ this.setState{totale:this.state.totale+value} } 渲染：函数{ 回来 诺姆 前奏曲 定量 总计 {this.props.items.mapprodotto=> } } }; 您可能想查看Ksyqo提到的Redux。然而，对于这样的需求，它可能并不完全是您所需要的，因为在您已经编写了现有应用程序代码的特定时刻，它需要您应用各种各样的样板文件和认知开销

对于较小的项目，您可能会发现，您可以使用MobX替代方案，以获得更好的结果，因为它更容易实现，尤其是在现有应用程序中。这也更容易推理。它将在开箱即用的情况下工作，并带有一点魔力

无论决定是什么，此图对Redux和MobX都适用，并说明了全局状态与父子链式状态的问题。前者显然要干净得多：

---

MobX似乎是一个很好的方法。我尝试过@Joakim Tangnes解决方案，它很有效，但存在性能问题，使输入类型非常慢。您的解决方案部分有效，我做了一些调整，但存在性能问题。我把 如果你能退房的话，我会把新密码贴在帖子上。谢谢