尝试减少我需要编写的功能数量以将状态设置为此元素大小的道具 [英] Trying lessening the amount of functions i need to write to set state to the props of this elements size
本文介绍了尝试减少我需要编写的功能数量以将状态设置为此元素大小的道具的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试设置使用函数选择的大小状态，但是我有20种大小，并且不想重复执行20次，是否有减少代码的方法?有没有一种方法可以检查状态更改是否与单击的道具匹配? 1，当他们单击按钮时，将状态设置为使用一个功能单击的元素的道具.
I am trying to set the state of size chosen with a function but i have 20 sizes and do not want to repeat a function 20 times is there a way to lessen the code? Is there a way to check and see if the state change matches the props clicked on? 1 when they click the button set the state to the props of the element clicked using one function.
如果您想查看完整的代码，请 https://github.com/CodingOni/Ecommerce-商店
If you want to look at the full code https://github.com/CodingOni/Ecommerce-Store
数据示例
{
id: 6.97,
title: "Adidas Yeezy Boost 350 V2 Glow",
img: "img/product-6.97.png",
img2: "img/product-6.97-1.png",
img3: "img/product-6.97-2.png",
img4: "img/product-6.97-3.png",
price: 800,
info: "Adidas Yeezy Boost 350 V2 Glow",
inCart: false,
count: 0,
total: 0,
size1: "4",
size2: "4.5",
size3: "5",
size4: "5.5",
size5: "6",
size6: "6.5",
size7: "7",
size8: "7.5",
size9: "8",
size10: "8.5",
size11: "9",
size12: "9.5",
size13: "10",
size14: "10.5",
size15: "11",
size16: "11.5",
size17: "12",
size18: "12.5",
size19: "13",
size20: "13.5",
size21: "14",
size22: "14.5",
size23: "16",
size24: "17",
luxury:
"All Luxuryitems are inspected to verify authenticity (Sizes above 14 may cost more)",
category: "Mens Shoes"
},
下拉菜单
import React from 'react';
import {
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from 'reactstrap';
export default class DropDown extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false,
choice: 'null'
};
}
toggle() {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen
}));
}
render() {
return (
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle className="bg-info" caret>
{this.props.title}
</DropdownToggle>
<DropdownMenu className="bg-info">
<DropdownItem className="bg-info" header>
{this.props.special}
</DropdownItem>
{this.props.size && (
<DropdownItem
onClick={() => {
this.setState({ choice: this.props.size });
}}
className="bg-info"
>
{this.props.size}
</DropdownItem>
)}
{this.props.size1 && (
<DropdownItem className="bg-info">{this.props.size1}</DropdownItem>
)}
{this.props.size2 && (
<DropdownItem className="bg-info">{this.props.size2}</DropdownItem>
)}
{this.props.size3 && (
<DropdownItem className="bg-info">{this.props.size3}</DropdownItem>
)}
{this.props.size4 && (
<DropdownItem className="bg-info">{this.props.size4}</DropdownItem>
)}
{this.props.size5 && (
<DropdownItem className="bg-info">{this.props.size5}</DropdownItem>
)}
{this.props.size6 && (
<DropdownItem className="bg-info">{this.props.size6}</DropdownItem>
)}
{this.props.size7 && (
<DropdownItem className="bg-info">{this.props.size7}</DropdownItem>
)}
{this.props.size8 && (
<DropdownItem className="bg-info">{this.props.size8}</DropdownItem>
)}
{this.props.size9 && (
<DropdownItem className="bg-info">{this.props.size9}</DropdownItem>
)}
{this.props.size10 && (
<DropdownItem className="bg-info">{this.props.size10}</DropdownItem>
)}
{this.props.size11 && (
<DropdownItem className="bg-info">{this.props.size11}</DropdownItem>
)}
{this.props.size12 && (
<DropdownItem className="bg-info">{this.props.size12}</DropdownItem>
)}
{this.props.size13 && (
<DropdownItem className="bg-info">{this.props.size13}</DropdownItem>
)}
{this.props.size14 && (
<DropdownItem className="bg-info">{this.props.size14}</DropdownItem>
)}
{this.props.size15 && (
<DropdownItem className="bg-info">{this.props.size15}</DropdownItem>
)}
{this.props.size16 && (
<DropdownItem className="bg-info">{this.props.size16}</DropdownItem>
)}
{this.props.size17 && (
<DropdownItem className="bg-info">{this.props.size17}</DropdownItem>
)}
{this.props.size18 && (
<DropdownItem className="bg-info">{this.props.size18}</DropdownItem>
)}
{this.props.size19 && (
<DropdownItem className="bg-info">{this.props.size19}</DropdownItem>
)}
{this.props.size20 && (
<DropdownItem className="bg-info">{this.props.size20}</DropdownItem>
)}
{this.props.size21 && (
<DropdownItem className="bg-info">{this.props.size21}</DropdownItem>
)}
{this.props.size22 && (
<DropdownItem className="bg-info">{this.props.size22}</DropdownItem>
)}
{this.props.size23 && (
<DropdownItem className="bg-info">{this.props.size23}</DropdownItem>
)}
{this.props.size24 && (
<DropdownItem className="bg-info">{this.props.size25}</DropdownItem>
)}
{this.props.size9 && (
<DropdownItem className="bg-info">{this.props.size25}</DropdownItem>
)}
</DropdownMenu>
</Dropdown>
);
}
}
Dropdown Menus Parent
import React, { Component } from "react";
import { ProductConsumer } from "../context";
import { Link } from "react-router-dom";
import { ButtonContainer } from "./Button";
import DropDown from "./Dropdown";
import ItemCategory from "./ItemCategory";
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { AwesomeButton } from "react-awesome-button";
export default class Details extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false,
};
}
toggle() {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen
}));
}
render() {
return (
<ProductConsumer>
{value => {
const {
id,
img,
img2,
img3,
img4,
info,
price,
title,
inCart,
size1,
size2,
size3,
size4,
size5,
size6,
size7,
size8,
size9,
size10,
size11,
size12,
size13,
size14,
size15,
size16,
size17,
size18,
size19,
size20,
size21,
size22,
luxury,
special,
category,
fabric
} = value.detailProduct;
return (
<div className="container-fluid width-100 bg-white py-5 mt-5 ">
{/* ProductInfo */}
<div className="row">
<div className="col mx-auto col-md-6 my-3 ">
<Carousel autoPlay>
<div>
<img src={img} className="img-fluid" alt="product" />
</div>
<div>
<img src={img2} className="img-fluid" alt="product" />
</div>
<div>
<img src={img3} className="img-fluid" alt="product" />
</div>
<div>
<img src={img4} className="img-fluid" alt="product" />
</div>
</Carousel>
{/* Add a Second Image */}
</div>
{/* Product Text */}
<div className="col mx-auto col-md-6 my-3 text-capitalize">
<h1 className="display-3">{title}</h1>
<h4 className="text-black">
<strong className="text-black">
price : <span>$</span>
{price}
</strong>
</h4>
<h4 className="text-blue">
<DropDown
title="Options"
special={special}
size={size1}
size1={size2}
size2={size3}
size3={size4}
size4={size5}
size5={size6}
size6={size7}
size7={size8}
size8={size9}
size9={size10}
size10={size11}
size11={size12}
size12={size13}
size13={size14}
size14={size15}
size15={size16}
size16={size17}
size17={size18}
size18={size19}
size19={size20}
size20={size21}
size21={size22}
/>
</h4>
<p className="text-black ">{info}</p>
<p className="text-black ">{fabric}</p>
<small className="text-danger">{luxury}</small>
{/* buttons */}
<div>
<Link to="/all">
<AwesomeButton
className="text-capitalize mx-10"
ripple
size="large"
type="primary"
>
Back To Products
</AwesomeButton>
</Link>
<div className="mt-2">
<AwesomeButton
className="text-capitalize m-auto"
ripple
size="medium"
type="primary"
cart
disabled={inCart ? true : false}
onPress={() => {
value.addToCart(id);
}}
>
{inCart ? "inCart" : "add to cart"}
</AwesomeButton>
</div>
<ItemCategory title={category} />
<div className="mt-2">
<img
src="https://www.paypalobjects.com/digitalassets/c/website/marketing/na/us/logo-center/9_bdg_secured_by_pp_2line.png"
border="0"
alt="Secured by PayPal"
/>
</div>
</div>
</div>
</div>
</div>
);
}}
</ProductConsumer>
);
}
}
推荐答案
为什么不简单地将大小设置为数组，以便可以在它们上循环?
Why not simply make the sizes an array so you can loop over them?
// In your object instead of having multiple sizes keys separately,
// have a single property called sizes
{
id: 6.97,
title: "Adidas Yeezy Boost 350 V2 Glow",
img: "img/product-6.97.png",
img2: "img/product-6.97-1.png",
img3: "img/product-6.97-2.png",
img4: "img/product-6.97-3.png",
price: 800,
info: "Adidas Yeezy Boost 350 V2 Glow",
inCart: false,
count: 0,
total: 0,
sizes:["4", "4.5", "6", "7", /*and the rest of the values*/],
luxury:
"All Luxuryitems are inspected to verify authenticity (Sizes above 14 may cost more)",
category: "Mens Shoes"
},
//Then you could simply do something like this
{this.props.yourObjectName.sizes.map((size, index)=> {
return (
<DropdownItem className="bg-info" key={index}>{size}</DropdownItem>
)
})
这篇关于尝试减少我需要编写的功能数量以将状态设置为此元素大小的道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
