将弹出组件中的值插入另一个框组件

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)>
                &#x2b;AddProduct</button> 
        </div>
        showAddProduct && <AddProduct setShowAddProduct=setShowAddProduct /> 
        </div>
    )


export default Home

【问题讨论】:

你能告诉我你打开或关闭弹出窗口的弹出状态在哪里吗? 你很早就给出了我认为可行的解决方案,但我没有去测试我能得到帮助吗 去按照答案,然后让我知道! 弹出窗口像往常一样打开,但弹出窗口中的信息没有插入框中。 AddProduct && 在上面的代码中,您将道具作为“setAddProduct”传递,因此在“box”组件中作为“props.setAddProduct”接收将工作。只是这样安慰它来检查!您正在使用“ProductList(setAddProduct)”,所以像这样访问:setAddProduct.setAddProduct in ProductList function. 【参考方案1】:

首先,您必须为弹出窗口设置一个状态以打开或关闭它(布尔值)。 然后你必须制作函数,点击时会调用它。设置 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;

【讨论】:

以上是关于将弹出组件中的值插入另一个框组件的主要内容,如果未能解决你的问题,请参考以下文章

UI控件之菜单(Menu)

如何将弹出框放置在突出显示的文本部分上?

将弹出框添加到当前导航控制器层次结构

Vue父组件如何调用子组件(弹出框)中的方法的问题

如何将列表项的值插入 KivyMD 中的另一个屏幕

将弹出框添加到以编程方式添加的 UIBarButtonItem 并将图像添加到相同的弹出框 Swift