将弹出组件中的值插入另一个框组件
Posted
技术标签:
【中文标题】将弹出组件中的值插入另一个框组件【英文标题】:insert values from a popup component to another box component 【发布时间】:2021-01-09 14:47:08 【问题描述】:我正在尝试在框内插入无序列表的列表项,该组件称为“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
【问题讨论】:
你能告诉我你打开或关闭弹出窗口的弹出状态在哪里吗? 你很早就给出了我认为可行的解决方案,但我没有去测试我能得到帮助吗 去按照答案,然后让我知道! 弹出窗口像往常一样打开,但弹出窗口中的信息没有插入框中。 AddProduct &&首先,您必须为弹出窗口设置一个状态以打开或关闭它(布尔值)。 然后你必须制作函数,点击时会调用它。设置 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;
【讨论】:
以上是关于将弹出组件中的值插入另一个框组件的主要内容,如果未能解决你的问题,请参考以下文章