我想向应用程序添加一个 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>
);
}
};
如有任何帮助,我们将不胜感激,谢谢。
最佳答案
您应该传递如下 Prop
<Cards
calories={...}
title={...}
handleChecked={...}
obj={...}
key={...}
/>
检查这个sample
关于javascript - React 中复选框 Sum 的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59595850/