javascript 父按钮以某种方式激活子按钮事件,而子按钮不起作用

jjjwad0x  于 2022-10-30  发布在  Java
关注(0)|答案(1)|浏览(106)

尝试在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。如果是这样的话,你能指出它吗?因为现在我有点卡住了:/
先谢谢你。

smdnsysy

smdnsysy1#

<button onClick={() => props.handleUpgradeBuy(item.item_id)}>Publicate</button>

帮了我。它使anon功能,所以它不会被立即激活渲染。

相关问题