尝试在offconvas
中添加子按钮,但打开/关闭它们会激活该按钮。并且该按钮本身不工作。
祖项Shop.js
import React, { useState } from 'react'
import ShopAssortment from './ShopAssortment'
import Button from 'react-bootstrap/Button';
import Offcanvas from 'react-bootstrap/Offcanvas';
import './Shop.css'
export default function ShopMenu(props) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<section>
<Button onClick={handleShow} className='open-shop-button'>
<p className='shop-button-text'>Open shop</p>
</Button>
<Offcanvas show={show} onHide={handleClose} placement="bottom" className='shop'>
<Offcanvas.Header closeButton>
<Offcanvas.Title><h2>Shop</h2></Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<ShopAssortment/>
</Offcanvas.Body>
</Offcanvas>
</section>
)
}
父项ShopAssortment.js
import React from 'react'
import ShopItems from './ShopItems'
export default function ShopAssortment(props) {
const shopAssortment = [
{item_id: 1, name: 'Item 1', price: 11, effect: 'some_effect', image: 'somePicture.png', available: true},
{item_id: 2, name: 'Item 2', price: 123, effect: 'some_effect', image: 'somePicture.png', available: true}
]
const availableAssortment = shopAssortment.filter(dict => dict.available === true)
const handleUpgradeBuy = (bought_upgrade_id) => {
shopAssortment.map((dict) => {
if (dict['item_id'] === bought_upgrade_id) {
console.log('It gets activated by parent')
dict['available'] = false
}
})
}
return (
<ShopItems
shopAssortment = {availableAssortment}
handleUpgradeBuy = {handleUpgradeBuy}
/>
)
}
子ShopItems.js
(当点击Grandparent(shop)
引导程序按钮时,handleUpgradeBuy
按钮被激活,打开offconvas
)
import React from 'react'
export default function ShopItems(props) {
return (
props.shopAssortment.map((item) => {
return (
<div className='shop-items' key={item.item_id}>
<div className='image-bg'>
<img src={'./img/' + item.image} className='item-img'></img>
</div>
<div className='item-description'>
<h4>{item.name}</h4>
<p>Price: {item.price}$</p>
<p>{item.effect}</p>
<button onClick={props.handleUpgradeBuy(item.item_id)}>Publicate</button>
</div>
</div>
)
}
)
)
}
这就是我点击祖父按钮时得到的结果,它激活了子按钮。同时,子按钮不起作用:
https://i.stack.imgur.com/G5lgb.pnghttps://i.stack.imgur.com/mDP5y.png显示器
也许我不明白一些React/JS。如果是这样的话,你能指出它吗?因为现在我有点卡住了:/
先谢谢你。
1条答案
按热度按时间smdnsysy1#
帮了我。它使anon功能,所以它不会被立即激活渲染。