如何让我的组件计算 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;

我希望此组件与 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

我不确定您为什么要使用不同的组件来计算值。您可以只使用 Card 组件的状态来计算。而且 <Cards.input.value/>; 好像也不对。如果你在道具中传递价值而不是使用 props. <your prop >

Answer 2

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

我已经重现了你要找的场景：

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

希望对您有所帮助！

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

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

How can I get my component to calculate the sum of checkbox values in React?

javascript

checkbox

reactjs

react-props