Javascript 如何让组件计算React中复选框值的总和？

此应用程序呈现一个食品列表，旁边有复选框。我有一个组件，当复选框值被选中时，它应该计算并显示复选框值的总和。我无法显示复选框中的值

这就是我目前拥有的

此文件呈现食物列表，每个食物旁边都有复选框

import React from "react";
import { Card, Accordion } from "react-bootstrap";

const Cards = props => {
  return (
    <Accordion defaultActiveKey="0">
      <Card>
        <Accordion.Toggle as={Card.Header} eventKey={`${props.key}`}>
          <input
            type="checkbox"
            value={props.calories}
          />{" "}
          {props && props.title + " : " + props.calories + "cal"}
        </Accordion.Toggle>

        <Accordion.Collapse eventKey={`${props.key}`}>
          <Card.Body>
            {" "}
            {props.obj.nutrients &&
              "fat: " + props.obj.nutrients["fat"]} ||{" "}
            {props.obj.nutrients &&
              "trans fats: " + props.obj.nutrients["transfat"]}
          </Card.Body>
        </Accordion.Collapse>
      </Card>{" "}
    </Accordion>
  );
};

export default Cards;

从“React”导入React；
从“react bootstrap”导入{Card，Accordion}；
常量卡=道具=>{
返回(
{" "}
{props&&props.title+”：“+props.carries+“cal”}
{" "}
{props.obj&&
“脂肪：“+props.obj.nutrients[“fat”]}| |{”“}”
{props.obj&&
“反式脂肪：”+props.obj.营养素[“transfat”]}
{" "}
);
};
导出默认卡；

我想让这个组件使用输入框中的值进行求和，输入框是Cards组件中的“props.carries”。这就是我到目前为止所尝试的

import React from 'react';
import Cards from './card';


class Calculator extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isChecked:false
        };
        this.handleChecked = this.handleChecked.bind(this);
    }

    handleChecked() {
     this.setState({isChecked: !this.state.isChecked});
    }



    render() {
            var total;
            if (this.state.isChecked) {
                total += <Cards.input.value/>;
            } 

        return (
            <div>
            <h1>Total: {total}</h1>
            </div>


        );
    }
}


export default Calculator;

从“React”导入React；
从“./卡”导入卡；
类计算器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
被检查：错误
};
this.handleChecked=this.handleChecked.bind（this）；
}
手工检查{
this.setState（{isChecked:！this.state.isChecked}）；
}
render（）{
总风险价值；
if（this.state.isChecked）{
总数+=；
} 
返回(
总计：{Total}
);
}
}
导出默认计算器；

---

我是全新的反应和任何帮助将不胜感激。谢谢。

我不知道为什么要用不同的分量来计算值。您可以只使用卡组件的状态来计算。而且

似乎不正确。如果您在道具中传递值，请使用
道具
我不知道为什么要用不同的组件来计算值。您可以只使用卡组件的状态来计算。而且
似乎不正确。如果您在道具中传递值，请使用
道具
很抱歉，上面给出的示例中存在多个错误。这是意料之中的，因为你们是新手，JSX的东西听起来像是一个外来的概念

我已经复制了您正在寻找的场景：


希望有帮助

如果您不理解示例中的某些内容，请随时发表评论。
很抱歉，上面给出的示例中存在多个错误。这是意料之中的，因为你们是新手，JSX的东西听起来像是一个外来的概念

我已经复制了您正在寻找的场景：


希望有帮助

如果您不理解示例中的某些内容，请随时发表评论。
我已经用多种方法进行了操作。“total+=；”是我的最终尝试我已经用多种方法进行了操作。“total+=；”是我的最终尝试复选框有两个值，1或0，所以我可以这样做？复选框有两个值，1或0所以我可以这样做？