问题描述
我在从单个基于反应功能的组件中的两个组件中获取价值时遇到了麻烦。我尝试使用组件中的两个道具，但仍然无法正常工作。我想在基于函数的名为ProductDetailDescription.jsx的组件中使用两个基于类的组件，分别称为Quantity.jsx和ProductDetail.jsx。 Quantity.jsx代码：
import React from 'react'
import { useStateValue } from "../../../components/contexApi/stateProvider/StateProvider";
class Quantity extends React.Component {
constructor(props) {
super(props);
this.state = {
quantity: 1,show: true,};
}
IncrementItem = () => {
this.setState(prevstate => {
if(prevstate.quantity < 10) {
return {
quantity: prevstate.quantity + 1
}
} else {
return null;
}
});
}
DecreaseItem = () => {
this.setState(prevstate => {
if(prevstate.quantity > 1) {
return {
quantity: prevstate.quantity - 1
}
} else {
return null;
}
});
}
ToggleClick = () => {
this.setState({
show: !this.state.show
});
}
handleChange = (event) => {
this.setState({quantity: event.target.value});
}
render() {
return ( <div className="d-inline">
<span className="mr-3">Quantity:</span>
<button className="quantity-btn" onClick={this.IncrementItem}>+</button>
<input disabled className="quantity-btn-input" value={this.state.quantity} onChange={this.handleChange}/>
<button className="quantity-btn" onClick = {this.DecreaseItem}>- </button>
</div>
);
}
}
export default Quantity
ProductDetail.jsx代码：
import React,{ Component } from "react";
import axios from "axios";
import "./ProductDetail.scss";
import { Link } from "react-router-dom";
import ProductDetailImage from "./productDetailImage/ProductDetailImage";
import ProductDetailDesciption from "./ProductDetailDescription/ProductDetailDesciption";
import ProductDetailDescriptionMenu from "./productDetailDescriptionMenu/ProductDetailDescriptionMenu";
class ProductDetail extends Component {
constructor(props) {
super(props);
this.state = {
posts: [],categories:[]
};
}
componentDidMount() {
axios
.get(
`https://123.com/product/${this.props.match.params.productId}`
)
.then((res) => {
const posts = res.data;
this.setState({ posts });
})
.catch(function (error) {
console.log(error);
});
axios
.get(
`https://123.com/product/categoriesName/${this.props.match.params.productId}`
)
.then((res) => {
const categories = res.data;
this.setState({ categories });
})
.catch(function (error) {
console.log(error);
});
}
render() {
return (
<div className="detailProduct">
<div className="detailProduct-menu">
<Link to="/" className="link"><span>Home</span></Link>
<i className="fa fa-angle-right mx-2"></i>
<Link to="/" className="link"><span>{this.state.categories.category}</span></Link>
<i className="fa fa-angle-right mx-2"></i>
<Link to="/" className="link"><span className="detailProduct-menu-subcategory">{this.state.categories.subCategory}</span></Link>
<h4 className="detailProduct-menu-subcategorytype">
{this.state.categories.subCategoryType}
</h4>
</div>
<div className="detailProduct-tools">
<div className="detailProduct-tools-item">
<ProductDetailImage data={this.state.posts} />
</div>
<div className="detailProduct-tools-item">
<ProductDetailDesciption data={this.state.posts} />
</div>
</div>
<div className="detailProduct-sold">
<span>S</span>
<span>
Sold by{" "}
<Link className="link ml-2 detailProduct-sold-link1" to="/">
Aalmari
</Link>
</span>
<span>
<Link className="link detailProduct-sold-link2" to="/">
Learn More
</Link>
</span>
</div>
<ProductDetailDescriptionMenu data={this.state.posts}/>
</div>
);
}
}
export default ProductDetail;
ProductDetailDescription.jsx代码：
import React,{Component} from "react";
import "./ProductDetailDesciption.scss";
import { Link } from "react-router-dom";
import Quantity from "./../quantity/Quantity";
import rating from '../../../components/rating/rating';
import { useStateValue } from "../../../components/contexApi/stateProvider/StateProvider";
import { useCallback } from "react";
function ProductDetailDesciption(props) {
const brand = props.data.brand;
const [{basket},dispatch]=useStateValue();
const addToBasket= () => {
console.log(basket);
//Add item to basket
dispatch({
type:"ADD_TO_BASKET",item: {
id:props.data.id,productimage:props.data.productimage,productName:props.data.productName,brand:brand.brandName,productQuantity,salePrice:props.data.salePrice,discountValue:props.data.discountValue
}
});
};
return (
<div className="productDetailDesciption">
<div className="productDetailDesciption-heading">
<h4>{props.data.productName}</h4>
<span className="d-block">Product Code: {props.data.productCode}</span>
<span>
<Link className="link" to="/">
Brand: {brand && brand.brandName}
</Link>
</span>
<rating/>
</div>
<div className="productDetailDesciption-price">
<h4 className="d-inline productDetailDesciption-price-actualPrice">
Rs.{props.data.salePrice}
</h4>
<span className="d-inline mx-2 productDetailDesciption-price-growPrice">
Rs.{(props.data.salePrice)+(props.data.discountValue)}
</span>
<p className="d-inline productDetailDesciption-price-discountPrice">
You save Rs.{props.data.discountValue}
</p>
</div>
<div className="productDetailDesciption-quantity">
<Quantity parentCallback={addToBasket.item.productQuantity} />
<span className="ml-md-3 productDetailDesciption-quantity-detail">
Call us for Bulk Purchases: 986x
</span>
</div>
<div className="productDetailDesciption-button">
<button onClick={addToBasket}>Buy Now</button>
<div>
<i className="fa fa-heart" />
<span className="ml-2">Save For Later</span>
</div>
</div>
<div className="productDetailDesciption-icon">
<div>
<i className="fas fa-building mr-2"></i> <span>SaptaSoch Warehouse</span>
</div>
<div>
<i className="fas fa-truck mr-2 "></i>{" "}
<span>Express Delivery Available</span>
</div>
</div>
<div className="productDetailDesciption-social">
<p>Share With Friends</p>
<i className="fa fa-facebook-official mt-3"></i>
<i className="fa fa-twitter mx-4"></i>
<i className="fa fa-instagram"></i>
</div>
</div>
);
}
export default ProductDetailDesciption;
在ProductDetailDescription.jsx的addToBasket项中，我希望从Quantity.jsx获得productQuantity值，并从ProductDetail.jsx获得其余所有值
const addToBasket= () => {
console.log(basket);
//Add item to basket
dispatch({
type:"ADD_TO_BASKET",discountValue:props.data.discountValue
}
});
};
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）