javascript - 将弹出组件中的值插入另一个框组件
问题描述
我正在尝试在框内插入无序列表的列表项,该组件称为“ProductList”。该组件的代码如下所示:
import React from 'react'
import './ProductList.css'
function ProductList(setAddProduct) {
return (
<div className="box">
<ul>
<li>S.N.</li>
<li>Product Name</li>
<li>Category</li>
<li>Stock</li>
<li>Status</li>
<li>Action</li>
</ul>
</div>
)
}
export default ProductList
当我在这个名为 AddProduct 的弹出组件中提供所有值和信息并单击保存按钮时,我希望弹出窗口关闭并将信息传输到上面的框组件。
import React from 'react'
import Dropdown from './Dropdown'
import './AddProduct.css'
import ProductList from './ProductList'
function AddProduct() {
const { useState } = React;
const [AddProduct, setAddProduct] = useState();
return (
<div className="box">
<h1>Add Product</h1>
<p>
<input type="text" placeholder="Name"></input>
<Dropdown />
</p>
<p>
<input type="text" placeholder="Stock"></input>
</p>
<div>
<button className="btn2" onClick={() => setAddProduct(AddProduct)}>Save</button>
</div>
{AddProduct && <ProductList setAddProduct={setAddProduct} />}
</div>
)
}
export default AddProduct
home js中的弹出窗口已经有usestate,如下所示:
import React from 'react'
import './Home.css'
import Dropdown from './Dropdown'
import Radiobutton from './Radiobutton'
import AddProduct from './AddProduct'
function Home() {
const { useState } = React;
const [showAddProduct, setShowAddProduct] = useState(false);
return (
<div>
<Radiobutton />
<div className="product">
<Dropdown />
<button className="btn1" onClick={() => setShowAddProduct(!showAddProduct)}>
+AddProduct</button>
</div>
{showAddProduct && <AddProduct setShowAddProduct={setShowAddProduct} />}
</div>
)
}
export default Home
解决方案
首先,您必须为弹出窗口设置一个状态以打开或关闭它(布尔值)。然后你必须制作函数,点击时会调用它。设置 popup(false) 的状态并设置 AddProduct。设置好后,将其发送到“盒子”,然后从盒子中将它们作为道具接收。这是可能的工作流程。
import React from 'react'
import Dropdown from './Dropdown'
import './AddProduct.css'
import ProductList from './ProductList'
function AddProduct() {
const { useState } = React;
const [AddProduct, setAddProduct] = useState();
const [popup,setPopUp] = useState(true);
//This is the function you have to set false popup state to close popup
//and send data to ProductList(box)
const handlePopUpCloseAndSendData = () =>{
setAddProduct(AddProduct); //to save data
setPopUp(false); //to close popup
}
return (
<div className="box">
<h1>Add Product</h1>
<p>
<input type="text" placeholder="Name"></input>
<Dropdown />
</p>
<p>
<input type="text" placeholder="Stock"></input>
</p>
<div>
<button className="btn2" onClick={
() =>handlePopUpCloseAndSendData() //function which will set States
}>Save</button>
</div>
{AddProduct && <ProductList setAddProduct={AddProduct} />}
</div>
)
}
export default AddProduct;
推荐阅读
- django - 即使在 URL 中提供详细视图所需的 ID 时,也不允许 Django ModelViewSet 方法 \"DELETE\"
- javascript - 使用 Deno 将 TypeScript 编译为 JavaScript
- javascript - 我可以在哪里存储 XML 文件供浏览器使用 ASP.Net MCV 读取
- python - 如何选择 statsmodels STL 函数的正确参数?
- javascript - 在javascript中替代Uint8Array?
- c# - 有没有办法让 JSON.net 尊重 System.Text.Json JsonPropertyName 属性
- javascript - 如何从中间件将错误返回给 ExpressJS?
- mailchimp - 获取 Mailchimp 活动点击的时间戳和成员的电子邮件
- regex - Dart Regexp 替换除数字之外的所有内容并允许一次。或者 ,
- php - react axios没有看到php文件路径