如何在ReactJS中创建和事件并发出警报

Question

我在每个产品中制作一个弹出警报并告诉商品描述的按钮时遇到问题。我可以让按钮出现在每个产品中，但这会给我带来麻烦。

这是我的代码：

产品.js:

import React from "react"
function Products(props){
return(
<div className="list">
<h3>{props.product.name}</h3>
<p style={{color: props.product.price >= 10 ? "red" : "yellow"}}>Price: ${props.product.price}</p>
<p>{props.product.description}</p>
<hr/>
</div>
)

}

导出默认产品

App.js:

import React from 'react'
import productsData from "./vschoolProducts"
import Products from "./Products"

函数应用程序()｛

const productsComponent = productsData.map(item => <Products key={item.id} product={item} />);

return (
<div>
{productsComponent}
</div>
);

}

导出默认应用

我的阵列(vschoolProducts.js)：

const products = [
{

id:"1",
name:"Pencil",
price:1,
description:"Something you write with. "
},
{

id:"2",
name:"Pen",
price:3,
description:"Something you write with....permanently "
},
{

id:"3",
name:"Paper",
price:7,
description:"Something you write on. "
},
{

id:"4",
name:"Binder",
price:4,
description:"Useful for sorting shit. "
},
{

id:"5",
name:"Notebook",
price:10,
description:"Great for jotting notes down. "
},
{

id:"6",
name:"Backpack",
price:12,
description:"Can hold all the previous products. "
}

]

导出默认产品

Answer 1

如果我的想法是正确的，你希望每个产品在点击时都能提醒它的描述，那么我相信你可以做到。在产品组件中添加onclick事件。

const productsComponent = productsData.map(item => <Products key={item.id} product={item} onClick={() => {alert(item.description);}} />);

Answer 2

本质上，如果我在我的应用程序中做这样的事情。我会这样做：创建两个状态，一个用于切换警报的可见性，另一个用于保持警报消息。然后我会生成这样的产品

<>
<div className="list">
<h3>{props.product.name}</h3>
<p style={{color: props.product.price >= 10 ? "red" : "yellow"}}>Price: ${props.product.price}</p>
<p>{props.product.description}</p>
<hr/>
<Button
variant="outlined"
onClick={() => {
setAlertMessage(product.description);
showMyAlertComponent(true);
setTimeout(() =>
showMyAlertComponent(false)
,6000);
}}
>
Click Me
</Button>

上面发生的事情是，我正在为我的所有产品创建一个按钮，并创建一个执行以下操作的onclick侦听器：设置我的警报消息，显示我的警报，然后在6秒钟后隐藏它。如果您使用的是像Material-UI组件这样的警报组件，您可以使用autoHideDuration而不是编写setTimeout代码。

然后我只返回我生成的产品和我的警报组件。我会将警报消息状态的值传递给警报组件，因此每当用户单击不同的项目时，它就会发生变化。

<>
{generationFunction}
<Alert
autoHideDuration={6000}
> 
{alertMessage}
</Alert>
</>

因此，通过这种方式，我只需要为我的所有项目设置一个Alert组件。如果你只是使用浏览器的提醒功能，尽管它更简单。

const generationFunction = products.map((product) => {
return(
<>
<div className="list">
<h3>{props.product.name}</h3>
<p style={{color: props.product.price >= 10 ? "red" : "yellow"}}>Price: ${props.product.price}</p>
<p>{props.product.description}</p>
<hr/>
<Button
variant="outlined"
onClick={() => {
alert(product.description)
}}
>
Click Me
</Button>
</div>
</>
);
});
return(generationFunction);

全代码

import { useState } from "react";
import { Button, Alert } from "@mui/material";
const products = [
{

id:"1",
name:"Pencil",
price:1,
description:"Something you write with. "
},
{

id:"2",
name:"Pen",
price:3,
description:"Something you write with....permanently "
},
];
const GenerateProducts = () => {
// create a state for my alert message
const [alertMessage, setAlertMessage] = useState("");
//create a state to toggle ur alert component, set State to false initially
const [showMyAlertComponent, setShowMyAlertComponent] = useState(false);
//generating components using your products array
const generationFunction = products.map((product) => {
// Generate buttons + Whatever other component you want to generate
//define onClick handler that sets your alertMessage and then shows it
return(
<>
<div className="list">
<h3>{props.product.name}</h3>
<p style={{color: props.product.price >= 10 ? "red" : "yellow"}}>Price: ${props.product.price}</p>
<p>{props.product.description}</p>
<hr/>
<Button
variant="outlined"
onClick={() => {
setAlertMessage(product.description);
showMyAlertComponent(true);
setTimeout(() =>
showMyAlertComponent(false)
,6000);
}}
>
Click Me
</Button>
</div>
</>
);
});
return(
<>
{generationFunction}
<Alert> 
{alertMessage}
</Alert>
</>
);
}