Блог

Всякий раз, когда я хотел удалить определенный продукт, он напрямую переходил на страницу индекса (домашняя страница), и я хотел показать модальное сообщение «Ваш продукт был удален», и через 5 секунд оно исчезнет.

вот мой код для ProductSummary.js:

 import React, { useState } from 'react';
import { Header, Button, Modal } from 'semantic-ui-react';
import axios from 'axios';
import urlLink from '../../utils/baseUrl';
import { useRouter } from 'next/router';

function ProductAttributes({ description, _id }) {
    const [modal, setModal] = useState(false);
    const [messagener, setMessagener] = useState(false);
    const router = useRouter();
async function deleteProduct() {
    // const url = `${urlLink}/api/product`;
    // const payload = { params: { _id } };
    // await axios.delete(url, payload);
    router.push('/');
    setMessagener(true);
    setMessagener(() => setMessagener(false), 5000);
}

return (
    <>
        <Header as="h3">About this product</Header>
        <p>{description}</p>
        <Button
            icon="trash alternate outline"
            color="red"
            content="Delete Product"
            onClick={() => setModal(true)}
        />
        <Modal open={modal} dimmer="blurring">
            <Modal.Header>Confirm Delete</Modal.Header>
            <Modal.Content>
                <p>Are you sure you want to delete this product?</p>
            </Modal.Content>
            <Modal.Actions>
                <Button content="Cancel" onClick={() => setModal(false)} />
                <Button
                    negative
                    icon="trash"
                    labelPosition="right"
                    content="Delete"
                    onClick={deleteProduct}
                />
            </Modal.Actions>
        </Modal>
    </>
);
}
export default ProductAttributes;
  

Примечание: Я просто закомментировал удаление, чтобы всякий раз, когда я нажимаю кнопку удаления, сообщение отображалось на моей домашней странице в течение 5 секунд. Я успешно удалил продукт, причина, по которой я его прокомментировал, потому что в моей базе данных всего 20 продуктов, и я не хочу их удалять или очищать свою базу данных.

Вот моя индексная страница (или домашняя страница) Index.js

 function Home({ products, messagener }) {
return (
    <Container>
        {messagener ? (
            <Message
                deleted
                icon="checked"
                color="red"
                content=" Product Successfully Deleted"
            />
        ) : (
            ''
        )}
        <ProductList products={products} />
    </Container>
);
}
  

После того, как я удалил продукт, и я успешно это сделал, я хотел показать именно так на картинке

и через 5 секунд он исчезнет.

вот мои репозитории github https://github.com/GrizzlyBear-Michaelangelo/Ecommerce.git для моей проблемы.

Примечание: Я не использовал никакого управления состоянием для этого проекта, и я хотел попрактиковаться в передаче реквизитов и событий.

Кто-нибудь может помочь мне передать дочернее родительскому?

Самым простым способом вы можете передать метод обратного вызова от родительского элемента к дочернему. Затем дочерний вызовет этот метод с данными, которые вы хотите установить.

 const Parent = () => {
  ...
  const [messanger, setMessanger] = useState(false);
  ...

  <Child setMessanger={setMessanger}>
}

const Child = (props) => {
  ...
  props.setMessanger(true);
  ...
}