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

Posted 2023-02-26

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

这是我目前拥有的。

此文件显示食物列表，每个食物旁边都有复选框。

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的新手，我们将不胜感激。谢谢。

答案

我不确定为什么要使用其他组件来计算值。您可以仅使用Card组件的状态进行计算。而且<Cards.input.value/>;似乎不正确。如果要传递道具的价值，则使用props. <your prop >

另一答案

很抱歉，上面的示例存在多个错误。可以预期，因为您是React和JSX的新手，起初听起来像是一个陌生的概念。

我转载了您要寻找的场景：

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

希望有帮助！

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