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

Question

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

这就是我目前所拥有的。

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

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;

我希望该组件对卡组件中输入框的“props.calories”值进行求和。这是我到目前为止所尝试过的。

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 的新手，任何帮助将不胜感激。谢谢。

Answer 1

很抱歉，上面给出的示例中有多个错误。这是预料之中的，因为你是 React 新手，而 JSX 最初听起来像是一个陌生的概念。

我已经重现了您正在寻找的场景:

https://codesandbox.io/s/react-example-uctkj

希望对你有帮助!

如果您不理解示例中的某些内容，请随时发表评论。