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

从“React”导入React
导入“./ProductList.css”
函数ProductList（setAddProduct）{
返回(

S.N
产品名称
类别
股票
地位
行动

)
}
导出默认产品列表

当我给出这个名为AddProduct的弹出组件内的所有值和信息并单击save按钮时，我希望弹出窗口关闭，并将信息传输到上面的box组件

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

从“React”导入React
从“./Dropdown”导入下拉列表
导入“./AddProduct.css”
从“./ProductList”导入ProductList
函数AddProduct（）{
const{useState}=React；
const[AddProduct，setAddProduct]=useState（）；
返回(
添加产品




setAddProduct（AddProduct）}>保存
{AddProduct&&}
)
}
导出默认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)}>
                &#x2b;AddProduct</button> 
        </div>
        {showAddProduct && <AddProduct setShowAddProduct={setShowAddProduct} />} 
        </div>
    )
}

export default Home

从“React”导入React
导入“./Home.css”
从“./Dropdown”导入下拉列表
从“./Radiobutton”导入Radiobutton
从“./AddProduct”导入AddProduct
函数Home（）{
const{useState}=React；
const[showAddProduct，setShowAddProduct]=useState（false）；
返回(
setShowAddProduct（！showAddProduct）}>
+；添加产品
{showAddProduct&}
)
}
导出默认主页

首先，您必须设置弹出窗口的状态以打开或关闭它（布尔值）。 然后，您必须生成函数，并在单击时调用该函数。设置弹出窗口的状态（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;

从“React”导入React
从“./Dropdown”导入下拉列表
导入“./AddProduct.css”
从“./ProductList”导入ProductList
函数AddProduct（）{
const{useState}=React；
const[AddProduct，setAddProduct]=useState（）；
const[popup，setPopUp]=useState（true）；
//这是您必须设置假弹出状态才能关闭弹出窗口的功能
//并将数据发送到ProductList（框）
const handlepopupccloseandsenddata=（）=>{
setAddProduct（AddProduct）；//保存数据
setPopUp（false）；//关闭弹出窗口
}
返回(
添加产品




handlePopUpCloseAndSendData（）//用于设置状态的函数
}>拯救
{AddProduct&&}
)
}
出口默认产品；

首先，您必须设置弹出窗口的状态以打开或关闭它（布尔值）。 然后，您必须生成函数，并在单击时调用该函数。设置弹出窗口的状态（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;

从“React”导入React
从“./Dropdown”导入下拉列表
导入“./AddProduct.css”
从“./ProductList”导入ProductList
函数AddProduct（）{
const{useState}=React；
const[AddProduct，setAddProduct]=useState（）；
const[popup，setPopUp]=useState（true）；
//这是您必须设置假弹出状态才能关闭弹出窗口的功能
//并将数据发送到ProductList（框）
const handlepopupccloseandsenddata=（）=>{
setAddProduct（AddProduct）；//保存数据
setPopUp（false）；//关闭弹出窗口
}
返回(
添加产品




handlePopUpCloseAndSendData（）//用于设置状态的函数
}>拯救
{AddProduct&&}
)
}
出口默认产品；

您能告诉我打开或关闭弹出窗口时所依据的弹出窗口状态在哪里吗？您很早就给出了解决方案，我认为该解决方案可行，但我没有进行测试。我可以获得帮助吗？请按照答案进行操作，然后让我知道！弹出窗口像往常一样打开，但弹出窗口中的信息不会插入框中。{AddProduct&&}在上面的代码中，您将道具作为“setAddProduct”传递，因此在“框”中接收作为“props.setAddProduct”的组件，它将起作用。就这样安慰它检查一下吧！您正在使用“ProductList（setAddProduct）”这样访问：ProductList函数中的setAddProduct.setAddProduct。你能告诉我打开或关闭弹出窗口所依据的弹出窗口的状态吗？你很早就给出了解决方案，我认为可以，但我没有得到测试。我能得到帮助吗？去看看答案，然后告诉我！弹出窗口像往常一样打开，但弹出窗口中的信息不会插入框中。{AddProduct&&}在上面的代码中，您将道具作为“setAddProduct”传递，因此在“框”中接收作为“props.setAddProduct”的组件，它将起作用。就这样安慰它检查一下吧！您正在使用“产品列表（setAddProduct