Reactjs 显示单击后输入的数量总和（react.js）

我对“应用程序”中输入的数字总和有一些疑问。我不知道怎样才能得到这笔钱。我有一些数字输入可能有不同的数量。用户必须在每个数字字段中输入一些金额单击“计算”按钮后，该数字输入的总和应显示在p>span中。 代码如下：

类和扩展了React.Component{
构造函数（）{
超级（）；
此.state={
要素：[“主要工作”、“自由职业者”]，
值：“”，
数值：“
};
this.adder=this.adder.bind（this）；
this.reset=this.reset.bind（this）；
this.handleChange=this.handleChange.bind（this）；
//this.handleChangeNumber=this.handleChangeNumber.bind（this）；
}
加法器（）{
this.state.elements.push（this.state.value）；
这是我的国家({
元素：this.state.elements
});
}
重置（）{
这是我的国家({
元素：this.state.elements.slice（1，1）
});
}
手变（e）{
这是我的国家({
价值：即目标价值
});
}
//手机号码（e）{
//这是我的国家({
//numberValue:e.target.value
//   });
// }
delCurrent（索引）{
本.状态.元件.拼接（索引，1）；
这是我的国家({
元素：this.state.elements
});
}
render（）{
const list=this.state.elements.map（（元素，索引）=>{
返回(

{element}:{”“}
美元
&时代；

);
});
返回(
现金控制“应用程序”
添加到列表中
重置
{list}

总额：

计算
);
}
}
render（，document.getElementById（“根”））；

获取数字输入总和的更好方法是为每个数字输入制作一个小组件，并在数字输入组件内保持状态。单击“计算”按钮后，可以使用react的状态提升概念获得每个组件的状态（数值），并可以计算总和

---

希望它能回答你的问题

将元素更改为对象，每个对象都有自己的数量

elements: [
    { title: 'main work', amount: 0 },
    { title: 'freelance', amount: 0 }
  ]

在加法器中，不要将项推送到状态，比如

this.state.elements.push（this.state.value）

要计算总数，请循环检查项目并将其金额相加

calculate = () => {
  let totalAmount = 0;
  this.state.elements.forEach(item => {
    totalAmount += item.amount;
  });

  this.setState({
    totalAmount
  })
}

处理输入更改

handleChangeNumber(e, index, title) {

  const amount = parseInt(e.target.value, 10);
  const element = { title, amount };

  this.setState({
    elements: [
      ...this.state.elements.slice(0, index),
      Object.assign({}, this.state.elements[index], element),
      ...this.state.elements.slice(index + 1)
    ]
  });
}

将元素的索引和标题传递给
.map

const list = this.state.elements.map((element, index) => {
  return (
    <li key={index}>
      {element.title}:{" "}
      <input
        style={{ width: 70, marginBottom: 2 }}
        type="number"
        value={this.state.elements[index].amount}
        onChange={(e) => this.handleChangeNumber(e, index, element.title)}
      />
      <span>USD</span>
      <button
        style={{ cursor: "pointer" }}
        onClick={() => this.delCurrent(index)}
      >
        &times;
      </button>
    </li>
  );
});

const list=this.state.elements.map（（元素，索引）=>{
返回(

{element.title}:{“”}
this.handleChangeNumber（e，index，element.title）}
/>
美元
this.delCurrent（index）}
>
&时代；

);
});

计算并显示总和

<p>
  Total sum: <span>{`$ ${this.state.totalAmount}`}</span>
</p>
<button onClick={this.calculate} style={{ cursor: "pointer" }}>calculate</button>


合计：{`$${this.state.totalAmount}`}

计算



类和扩展了React.Component{
构造函数（）{
超级（）；
此.state={
元素：[{标题：“主要工作”，金额：0}，{标题：“自由职业者”，金额：0}]，
值：“”，
数字值：“”，
总数：0，
};
this.adder=this.adder.bind（this）；
this.reset=this.reset.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.handleChangeNumber=this.handleChangeNumber.bind（this）；
}
加法器（）{
这是我的国家({
元素：[…this.state.elements，{title:this.state.value，amount:0}]，
值：“”，
});
}
重置（）{
这是我的国家({
元素：this.state.elements.slice（1,1），
总数：0，
值：“”，
});
}
手变（e）{
这是我的国家({
价值：即目标价值
});
}
计算=（）=>{
设totalAmount=0；
this.state.elements.forEach（项=>{
合计金额+=项目金额；
});
这是我的国家({
总数
})
}
handleChangeNumber（e、索引、标题）{
const amount=parseInt（即target.value，10）；
常量元素={title，amount}；
这是我的国家({
要素：[
…this.state.elements.slice（0，索引），
Object.assign（{}，this.state.elements[index]，element），
…this.state.elements.slice（索引+1）
]
});
}
delCurrent（索引）{
本.状态.元件.拼接（索引，1）；
这是我的国家({
元素：this.state.elements
}，这个。计算）；
}
render（）{
const list=this.state.elements.map（（元素，索引）=>{
返回(

{element.title}:{“”}
this.handleChangeNumber（e，index，element.title）}
/>
美元
this.delCurrent（index）}
>
&时代；

);
});
返回(
现金控制“应用程序”
添加到列表中
重置
{list}

合计：{`$${this.state.totalAmount}`}

计算
);
}
}
render（，document.getElementById（“根”））；

<p>
  Total sum: <span>{`$ ${this.state.totalAmount}`}</span>
</p>
<button onClick={this.calculate} style={{ cursor: "pointer" }}>calculate</button>