如何解决我可以通过单击按钮来调用组件吗,可以直接在onclick事件值内传递组件吗?
我试图通过单击另一个组件内部的添加按钮来调用一个组件,该组件的容器中包含有关产品的所有信息。我希望单击添加产品按钮,并且要加载或弹出AddProduct组件,以便我可以开始填写产品信息。 代码是这样的:
1...21
在单击按钮时加载此组件。
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 />}>
+AddProduct</button>
</div>
</div>
)
}
export default Home
解决方法
使用状态来处理弹出可见性,例如布尔值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); /* Fallback color */
background-color: rgba(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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。