Javascript React 16隐藏按钮模式在单击时不打开
我创建了一个隐藏按钮，通过单击任何列表项来启用它。我将Javascript React 16隐藏按钮模式在单击时不打开,javascript,reactjs,react-bootstrap,Javascript,Reactjs,React Bootstrap,我创建了一个隐藏按钮，通过单击任何列表项来启用它。我将showmodel功能附加到确认按钮的onClick。当我单击确认按钮时，它将打开模式，而不是什么都没有发生。控制台中没有错误。 这里少了什么 import React from "react"; import { Form, FormGroup, Row, FormControl, Col, Button, Label, Modal, ButtonToolbar, Table } from "reac
showmodelonClickimport React from "react";
import {
Form,
FormGroup,
Row,
FormControl,
Col,
Button,
Label,
Modal,
ButtonToolbar,
Table
} from "react-bootstrap";
const MorningDrinks = [
{
id: "1",
name: "Tea",
cost: 15
},
{
id: "2",
name: "Coffee",
cost: 15
},
{
id: "3",
name: "Milk",
cost: 15
}
];
const ChoclateDrinks = [
{
id: "4",
name: "Smoothie",
cost: 15
},
{
id: "5",
name: "Hot Chocolate",
cost: 15
}
];
class MenuCard extends React.Component {
// constructor(props) {
// super(props);
state = {
selectedItems: []
};
// this.selectItem = this.selectItem.bind(this);
//this.showModal = this.showModal.bind(this);
//this.hideModal = this.hideModal.bind(this);
//}
showModal = () => {
this.setState({ show: true });
}
hideModal = () => {
this.setState({ show: false });
}
selectItem = item => {
const { counter, selectedItems } = this.state;
const newItem = {
...item,
quantity: 1
};
const el = selectedItems.filter(el => el.id === newItem.id);
if (selectedItems.length === 0) {
this.setState({
selectedItems: selectedItems.concat([newItem])
});
} else {
if (el.length) {
const newSelectedItems = selectedItems.map(item => {
if (item.id === newItem.id) {
item.quantity++;
}
return item;
});
this.setState({
selectedItems: newSelectedItems
});
} else {
this.setState({
selectedItems: selectedItems.concat([newItem])
});
}
}
};
deleteItem = i => {
this.setState({
selectedItems: this.state.selectedItems.filter((item, index) => {
return index !== i;
})
});
}
render() {
const { counter, selectedItems } = this.state;
return (
<div className="container">
<p>Welcome {this.props.name}! Pick your any Break-fast menu you want</p>
<Row>
<Col xs={3}>
<ul>
<h2>Morning Drinks </h2>
{MorningDrinks.map((item, i) => (
<li
style={{ cursor: "pointer" }}
key={i}
onClick={() => this.selectItem(item)}
>
{item.name} {item.cost}
</li>
))}
</ul>
<ul>
<h2>Chocolate Drinks </h2>
{ChoclateDrinks.map((item, i) => (
<li
style={{ cursor: "pointer" }}
key={i}
onClick={() => this.selectItem(item)}
>
{item.name} {item.cost}
</li>
))}
</ul>
</Col>
<Col xs={3}>
<ul>
<h2>Your orders </h2>
{selectedItems.map((item, i) => (
<li key={i}>
{item.name} {item.cost} {item.quantity}
<span onClick={() => this.deleteItem(i)}>cancel</span>
</li>
))}
</ul>
{this.state.selectedItems.length > 0 ? (
<ButtonToolbar>
<Button type="button" style={{ display: "block" }} onClick={this.showModal}>
Confrim
</Button>
<Modal
{...this.props}
show={this.state.show}
onHide={this.hideModal}
dialogClassName="custom-modal"
>
<Modal.Header closeButton>
<Modal.Title
id="contained-modal-title-lg "
className="text-center"
>
Add Expenses
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Wrapped Text</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</Modal.Body>
</Modal>
</ButtonToolbar>
) : (
<Button type="button" style={{ display: "none" }}>
Confrim
</Button>
)}
</Col>
<Col xs={3}>
<ul>
<h3>Total</h3>
{selectedItems.reduce(
(acc, item) => acc + item.cost * item.quantity,
0
)}
</ul>
</Col>
</Row>
</div>
);
}
}
export default MenuCard;
从“React”导入React；
进口{
形式，
FormGroup，
一行
FormControl，
上校，
按钮
标签，
情态动词
巴顿托巴，
桌子
}从“反应引导”；
康斯特早晨饮料=[
{
id:“1”，
名称：“茶”，
费用：15
},
{
id:“2”，
名称：“咖啡”，
费用：15
},
{
id:“3”，
名称：“牛奶”，
费用：15
}
];
康斯特巧克力饮料=[
{
id:“4”，
名称：“冰沙”，
费用：15
},
{
id:“5”，
名称：“热巧克力”，
费用：15
}
];
类MenuCard扩展了React.Component{
//建造师（道具）{
//超级（道具）；
状态={
selectedItems:[]
};
//this.selectItem=this.selectItem.bind（this）；
//this.showmodel=this.showmodel.bind（this）；
//this.hideModal=this.hideModal.bind（this）；
//}
showModal=（）=>{
this.setState（{show:true}）；
}
hideModal=（）=>{
this.setState（{show:false}）；
}
selectItem=item=>{
const{counter，selectedItems}=this.state；
常量newItem={
…项目，
数量：1
};
const el=selectedItems.filter（el=>el.id==newItem.id）；
如果（selectedItems.length==0）{
这是我的国家({
selectedItems:selectedItems.concat（[newItem]）
});
}否则{
if（el.长度）{
const newSelectedItems=selectedItems.map（项=>{
if（item.id==newItem.id）{
项目.数量++；
}
退货项目；
});
这是我的国家({
selectedItems:newSelectedItems
});
}否则{
这是我的国家({
selectedItems:selectedItems.concat（[newItem]）
});
}
}
};
deleteItem=i=>{
这是我的国家({
selectedItems:this.state.selectedItems.filter（（项目，索引）=>{
返回索引！==i；
})
});
}
render（）{
const{counter，selectedItems}=this.state；
返回(
欢迎{this.props.name}！选择您想要的任意快速菜单
晨饮
{MorningDiverss.map（（项目，i）=>(
- this.selectItem（item）}
>
{item.name}{item.cost}
))}
巧克力饮料
{ChoclateDrinks.map（（项目，i）=>(
- this.selectItem（item）}
>
{item.name}{item.cost}
))}
你的命令
{selectedItems.map（（项，i）=>(
-
{item.name}{item.cost}{item.quantity}
this.deleteItem（i）}>取消
))}
{this.state.selectedItems.length>0(
Confrim
增加费用
包装文本
马蒂斯·康塞特图尔·普鲁斯坐在发酵罐里。康塞特图尔·奥迪奥坐在设施里，康塞特图尔坐在广场上。莫里比·利奥·里索斯坐在康塞特图尔·阿莫斯的门廊里
这是一个伟大的真理，是一个神圣的圣器，是一个伟大的圣器
这是一个不可分割的区域。这是一个巨大的区域，一个不可分割的区域。这是一个不可分割的区域
马蒂斯·康塞特图尔·普鲁斯坐在发酵罐里。康塞特图尔·奥迪奥坐在设施里，康塞特图尔坐在广场上。莫里比·利奥·里索斯坐在康塞特图尔·阿莫斯的门廊里
这是一个伟大的真理，是一个神圣的圣器，是一个伟大的圣器
这是一个不可分割的区域。这是一个巨大的区域，一个不可分割的区域。这是一个不可分割的区域
马蒂斯·康塞特图尔·普鲁斯坐在发酵罐里。康塞特图尔·奥迪奥坐在设施里，康塞特图尔坐在广场上。莫里比·利奥·里索斯坐在康塞特图尔·阿莫斯的门廊里
这是一个伟大的真理，是一个神圣的圣器，是一个伟大的圣器
这是一个不可分割的区域。这是一个巨大的区域，一个不可分割的区域。这是一个不可分割的区域
) : (
Confrim
)}
全部的
{selectedItems.reduce(
（会计科目，项目）=>会计科目+项目成本*项目数量，
0
)}
);
}
}
导出默认菜单；
constructor(props) {
super(props);
this.state = {
selectedItems: [], show: false,
};
// this.selectItem = this.selectItem.bind(this);
//this.showModal = this.showModal.bind(this);
//this.hideModal = this.hideModal.bind(this);
}
import React from "react";
import {
Form,
FormGroup,
Row,
FormControl,
Col,
Button,
Label,
Modal,
ButtonToolbar,
Table
} from "react-bootstrap";
const MorningDrinks = [
{
id: "1",
name: "Tea",
cost: 15
},
{
id: "2",
name: "Coffee",
cost: 15
},
{
id: "3",
name: "Milk",
cost: 15
}
];
const ChoclateDrinks = [
{
id: "4",
name: "Smoothie",
cost: 15
},
{
id: "5",
name: "Hot Chocolate",
cost: 15
}
];
export class MenuCard extends React.Component {
state = {
selectedItems: [],
show: false
};
showModal = () => {
this.setState({ show: true });
}
hideModal = () => {
this.setState({ show: false });
}
selectItem = item => {
const { counter, selectedItems } = this.state;
const newItem = {
...item,
quantity: 1
};
const el = selectedItems.filter(el => el.id === newItem.id);
if (selectedItems.length === 0) {
this.setState({
selectedItems: selectedItems.concat([newItem])
});
} else {
if (el.length) {
const newSelectedItems = selectedItems.map(item => {
if (item.id === newItem.id) {
item.quantity++;
}
return item;
});
this.setState({
selectedItems: newSelectedItems
});
} else {
this.setState({
selectedItems: selectedItems.concat([newItem])
});
}
}
};
deleteItem = i => {
this.setState({
selectedItems: this.state.selectedItems.filter((item, index) => {
return index !== i;
})
});
}
render() {
const { counter, selectedItems } = this.state;
return (
<div className="container">
<p>Welcome {this.props.name}! Pick your any Break-fast menu you want</p>
<Row>
<Col xs={3}>
<ul>
<h2>Morning Drinks </h2>
{MorningDrinks.map((item, i) => (
<li
style={{ cursor: "pointer" }}
key={i}
onClick={() => this.selectItem(item)}
>
{item.name} {item.cost}
</li>
))}
</ul>
<ul>
<h2>Chocolate Drinks </h2>
{ChoclateDrinks.map((item, i) => (
<li
style={{ cursor: "pointer" }}
key={i}
onClick={() => this.selectItem(item)}
>
{item.name} {item.cost}
</li>
))}
</ul>
</Col>
<Col xs={3}>
<ul>
<h2>Your orders </h2>
{selectedItems.map((item, i) => (
<li key={i}>
{item.name} {item.cost} {item.quantity}
<span onClick={() => this.deleteItem(i)}>cancel</span>
</li>
))}
</ul>
{this.state.selectedItems.length > 0 ? (
<ButtonToolbar>
<Button type="button" style={{ display: "block" }} onClick={this.showModal}>
Confrim
</Button>
</ButtonToolbar>
) : (
<Button type="button" style={{ display: "none" }}>
Confrim
</Button>
)}
</Col>
<Col xs={3}>
<ul>
<h3>Total</h3>
{selectedItems.reduce(
(acc, item) => acc + item.cost * item.quantity,
0
)}
</ul>
</Col>
</Row>
<Modal
show={this.state.show}
onHide={this.hideModal}
dialogClassName="custom-modal"
>
<Modal.Header closeButton>
<Modal.Title
id="contained-modal-title-lg "
className="text-center"
>
Add Expenses
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Wrapped Text</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</Modal.Body>
</Modal>
</div>
);
}
}
export default MenuCard;