reactjs - 我如何在 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>
)

}

导出默认产品

应用程序.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. "
}

]

导出默认产品

标签： reactjsbuttoneventsevent-handling

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

}