如何在 ReactJS 中制作和事件并发出警报？

Posted 2023-02-22

【中文标题】如何在 ReactJS 中制作和事件并发出警报？

【英文标题】：How do I make and event and have an alert in ReactJS?

【发布时间】：2021-11-20 22:12:18

【问题描述】：

我无法在每个产品中制作一个按钮，该按钮会弹出警报并告知商品的描述。我可以让按钮出现在每个产品中，但它使事件给我带来了麻烦。

这是我的代码：

Product.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"

函数 App()

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. "

]

导出默认产品

【问题讨论】：

请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

【参考方案1】：

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

<>
<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>
</>

因此，通过这种方式，我的所有项目只需要 1 个警报组件。如果你只是使用浏览器的警报功能，那就更简单了。

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>
</>
);

【讨论】：

const GenerateProducts = () => 部分让我感到困惑，因为您将代码放在一页上的方式。你确实把它分成了 3 个部分，但我不知道该把它放在哪里。我应该把它放在自己的文件中是我的问题吗？最后一个代码 sn-p 似乎我应该把所有东西都放在我的数组中。非常感谢您的帮助。

我明白了非常感谢您的帮助。非常感谢。

【参考方案2】：

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

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

【讨论】：

我为警报制作了另一个名为 Button.js 的组件，它正在工作。按钮上显示“单击我”，并且警报框显示：“警报”。现在不是显示“警报”的警报框，我希望该警报框显示数组中每个按钮的特定项目的描述。非常感谢你的帮助。我觉得我很接近了。