React 中复选框总和的组件

Posted 2023-02-23

【中文标题】React 中复选框总和的组件

【英文标题】：Component for Checkbox Sum in React

【发布时间】：2020-04-23 00:54:03

【问题描述】：

我想将 React 组件添加到应用程序，但我对如何将复选框的值传递给组件感到困惑。 这是 Codepen 上的 javascript 和 html 示例：https://codepen.io/OtoiEbba/pen/MWYONbx

这是我目前拥有的代码。一个组件，它显示来自 JSON 文本文件的食物列表，其中包含卡路里和脂肪的值。我希望复选框中的值显示在不同的组件中。

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

const Cards = props => 
  return (
    <Card >
      <Accordion.Toggle as=Card.Header eventKey=`$props.key`> 
        <input type="checkbox" value=props.calories onChange=props.handleChecked></input> props && props.title + " : " + props.calories + "cal"
      </Accordion.Toggle>
      <Accordion eventKey=`$props.key`>
        <Card.Body> props.obj.nutrients && "fat: " + props.obj.nutrients["fat"] || props.obj.nutrients && "trans fats: " + props.obj.nutrients["trans-fat"]</Card.Body>
      </Accordion>
    </Card>
  );
;

export default Cards;

这是我想在其中使用复选框值的组件。每当我尝试导入值时都会收到编译错误。所以我把组件留空了。

import React from 'react';
import Cards from './pages/cards';

class Calculator extends React.Component 
constructor(props)
    super(props);
    this.state = 
        total: 0
    
 


 render()
     return(
        <div> </div>
     );
 
;

任何帮助将不胜感激，谢谢。

【参考方案1】：

你应该像下面这样传递道具

<Cards
      calories=...
      title=...
      handleChecked=...
      obj=...
      key=...
    />

检查这个sample