如何解决将值从弹出组件插入到另一个Box组件
我正尝试在框内插入具有无序列表的列表项,并且此组件称为“ 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
首页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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。