javascript - React 中复选框总和的组件
问题描述
我想将 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>
);
}
};
任何帮助将不胜感激,谢谢。
解决方案
推荐阅读
- sql - 如何尝试从链接服务器上执行的查询中捕获错误?
- r - 提高 R 中不良/可能不必要的 Apply 的性能
- mysql - 对从值 x 开始的行组求和,直到遇到值 y,然后重复
- excel - 引用范围的 targe.value 时如何避免类型不匹配错误?
- python - 如何实现自相关函数
- javascript - 如何将指针事件沿层堆栈中的对象冒泡?
- node.js - 启动电子时将作业安排到队列中
- c# - 在批处理结束时检测到不可提交的事务。事务回滚
- ruby-on-rails - Rails prepend_view_paths 没有覆盖默认视图路径
- python-3.x - 我如何正确使用字符串和工程符号数字执行 numpy.savetxt?