我可以通過單擊按鈕調用組件嗎？我可以直接在 onclick 事件值中傳遞組件嗎？

Question

我試圖通過單擊另一個組件內的添加按鈕來調用一個組件，其中它有一個容器，其中包含有關產品的所有信息。 我希望單擊添加產品按鈕並加載或彈出 AddProduct 組件，以便我可以開始填寫產品信息。 代碼是這樣的：

import React from 'react'
import './Home.css'
import Dropdown from './Dropdown'
import Radiobutton from './Radiobutton'
import AddProduct from './AddProduct'


function Home() {



return (
    <div>
        <Radiobutton />
        
    <div className="product">
        <Dropdown />
        
        
        <button className="btn1" onClick={<AddProduct />}>
            &#x2b;AddProduct</button> 
    </div>
        
    </div>
  )
}

export default Home

單擊按鈕時加載此組件。

 import React from 'react'
 import Dropdown from './Dropdown'
 import './AddProduct.css'

 function AddProduct() {
   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">Save</button>
       </div>
    
      
    </div>
   )
}

export default AddProduct

Answer 1

使用 state 處理彈出窗口可見性，例如 boolean 值showAddProduct ，在單擊“ Add Product ”按鈕時切換它。 如下圖。 保存產品后將其關閉。

 const { useState } = React; // add'l components const Radiobutton = () => <input type="radio" />; const Dropdown = () => <select><option>Drop Down1</option> <option>Drop Down2</option> </select>; //actual code function Home() { 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> ); } function AddProduct({ setShowAddProduct }) { return ( <div className="modal"> <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={() => setShowAddProduct(false)}> Save </button> </div> </div> </div> ). } // Render it ReactDOM,render( <Home/>. document;getElementById("react") );

 .modal { display: block; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }.box { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="react"></div>