[英]How to pass the props value from the other sibling components in React JS
I have question regarding sending clicked value to the first sibling components and I will send the props value to the second siblings is that possible?我有关于将点击值发送到第一个兄弟组件的问题,我会将道具值发送给第二个兄弟组件,这可能吗?
I have module where when I click the Category Items to the first siblings the Products on the second sibling will change based on the category name that I click on the first sibling.我有一个模块,当我单击第一个兄弟姐妹的类别项目时,第二个兄弟姐妹上的产品将根据我单击第一个兄弟姐妹的类别名称发生变化。
Here is my Parent Components:这是我的父组件:
function BuyerCategoryPage(props) {
return (
<div>
<CategorySlider />
<CategoryProducts/>
</div>
)
}
export default BuyerCategoryPage
First Sibling CategorySlider.js:第一兄弟类别Slider.js:
const HandleChangeProductCat = (value) => {
console.log(value);
// send the value to the second sibling
}
return (
<div>
<Container fluid>
<Slider style={{paddingTop:20, margin: '0 auto'}} {...settings}>
{
SlideData.map((data) => {
return (
<div key={data.id} >
<div className="sliderDataCategory">
<h6>
<Container>
<Row>
<Col md={3}>
<img className="img-fluid" src={data.cat_image} />
</Col>
<Col >
<label onClick={() => HandleChangeProductCat(data.cat_title)}>{data.cat_title}</label>
</Col>
</Row>
</Container>
</h6>
</div>
</div>
)
})
}
</Slider>
</Container>
</div>
)
Second Sibling CategoryProducts.js二姐弟分类Products.js
function CategoryProducts(props) {
}
The simplest would be to lift state up into the BuyerCategoryPage
component and pass an "onChange" handler to CategorySlider
and the state value to CategoryProducts
最简单的方法是将状态提升到BuyerCategoryPage
组件并将“onChange”处理程序传递给CategorySlider
并将状态值传递给CategoryProducts
function BuyerCategoryPage(props) {
const [state, setState] = React.useState(); // common state
return (
<div>
<CategorySlider onChange={setState} /> // pass updater function
<CategoryProducts value={state} /> // pass state value
</div>
);
}
CategorySlider类别滑块
const handleChangeProductCat = (value) => {
console.log(value);
props.onChange(value); // invoke callback and pass new value
}
CategoryProducts分类产品
function CategoryProducts({ value }) { // access the passed value
// use the `value` prop as necessary
}
For example:例如:
function Example() {
const [value, setValue] = useState("");
const onClick = (someValue) => {
setValue(someValue);
}
return (
<div>
<First onClick={onClick} />
<Second value={value} />
</div>
)
}
function First(props) {
const onClick = () => {
props.onClick((new Date()).toString());
}
return (
<input type="button" onClick={onClick} value="Click me" />
)
}
function Second(props) {
return (
<div>{props.value}</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.