如何在 parent 事件上更改 children？

Question

我有一个 component 分成较小的部分。单击添加按钮时，我需要从所有活动红色 children.

中删除选择

选择由 className topping-false 或 topping-true（useState 挂钩）处理。所以实际上我需要将所有类名更改为 false（如果有的话）。我该怎么做？

const Topping = (props) => {
const {
    img,
    name,
    price,
} = props

const [chosenTopping, setChosenTopping] = useState(false);

const handleTopping = () => {
    setChosenTopping(!chosenTopping)
    !chosenTopping ? store.dispatch(addTopping({...})) : 
                          store.dispatch(deleteTopping(name))
}

return <div className={'topping-' + chosenTopping} onClick={() => handleTopping()}>
    <img className='topping__image' src={img} alt={`${name}`} />
    <div className='topping__text'>
        <div className='topping__info'>
            <h3 className='topping__name'>{name}</h3>
            <h4 className='topping__price'>${price}</h4>
        </div>
    </div>
</div>;
};

export default Topping;

有parent个代码：

const BigCard = (props) => {
const {
    img,
    name,
    price,
} = props

const newId = () => Math.floor((1 + Math.random()) * 0x10000000)
    .toString(16)

const addToCart = () => {
    store.dispatch(addDish({...}))
    store.dispatch(clearToppings())
}


return <div className='big-card'>
    <div className='big-card__content' onClick={(e) => handleBigCard(e)}>
        <img className='big-card__image' src={img} alt='pizza_image' />
        <div className='big-card__info'>
            <h1 className='big-card__name'>{name}</h1>
            <p className='big-card__description'>Chicken pieces, bell peppers, cheddar and parmesan cheese mix, mozzarella, red onion, sweet chili sauce, alfredo sauce</p>
            <Toppings />
            <div className='big-card__button'>
                <MenuButton onClick={() => addToCart()}>
                    <h3 className='big-card__price'>Add to cart for ${fullPrice}</h3>
                </MenuButton>
            </div>
        </div>
    </div>
</div>;
};

export default BigCard;

Answer 1

const BigCard = (props) => {
const {
    img,
    name,
    price,
} = props
const [isSelection,setSelection]=useState(true) //added
const newId = () => Math.floor((1 + Math.random()) * 0x10000000)
    .toString(16)

const addToCart = () => {
    setIsSelection((isSelection)=>!isSelection) //added
    store.dispatch(addDish({...}))
    store.dispatch(clearToppings())
}


return <div className='big-card'>
    <div className='big-card__content' onClick={(e) => handleBigCard(e)}>
        <img className='big-card__image' src={img} alt='pizza_image' />
        <div className='big-card__info'>
            <h1 className='big-card__name'>{name}</h1>
            <p className='big-card__description'>Chicken pieces, bell peppers, cheddar and parmesan cheese mix, mozzarella, red onion, sweet chili sauce, alfredo sauce</p>
            <Toppings isSelection={isSelection} />
            <div className='big-card__button'>
                <MenuButton onClick={() => addToCart()}>
                    <h3 className='big-card__price'>Add to cart for ${fullPrice}</h3>
                </MenuButton>
            </div>
        </div>
    </div>
</div>;
};

export default BigCard;

在 Toppings 中添加 isSelection 和其他道具，如下所示：

 const Toppings=({isSelection})=>{
 let array=[]
  return array.map(val=> <Topping isSelection={isSelection} />  ) 
}

然后您可以访问 Topping

中的 isSelection


const Topping = (props) => {
const {
    img,
    name,
    price,
    isSelection

} = props
const [chosenTopping, setChosenTopping] = useState(false)
useEffect(()=>{
setChosenTopping(false)
}
,[isSelection])
.
..
..
...

return <div className={'topping-' + chosenTopping} onClick={() => handleTopping()}>
    <img className='topping__image' src={img} alt={`${name}`} />
    <div className='topping__text'>
        <div className='topping__info'>
            <h3 className='topping__name'>{name}</h3>
            <h4 className='topping__price'>${price}</h4>
        </div>
    </div>
}

如何在 parent 事件上更改 children？

How to change children on parent event?

javascript

components

reactjs

react-hooks