如何解决如何在React中将子useState传递给Parent?功能组件
每当我想删除某个产品时,它都会直接转到索引页面(主页),并且我想显示消息模式,说“您的产品已被删除”,并且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);
...
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。