Question

每当我想删除某个产品时，它都会直接转到索引页面（主页），并且我想显示消息模式，说“您的产品已被删除”，并且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。

注意：我没有为此项目使用任何状态管理，而是想练习传递道具和事件。

任何人都可以帮助我将孩子送给父母吗？

Answer 1

以最简单的方式，您可以将回调方法从父级传递到子级。然后孩子将使用您要设置的数据调用该方法。

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

  <Child setMessanger={setMessanger}>
}

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

如何在React中将子useState传递给Parent？功能组件

1 个答案: