javascript - 如何动态显示模态中出现的内容
问题描述
如果我在两者之间写入,则单击适当的按钮后,所选的食物类型会成功显示在模态中<Modal>
<p>{this.state.cTaco}</p>
<p>{this.state.bTaco}</p>
<p>{this.state.cBurrito}</p>
但是,我希望它使用某种地图或循环动态显示,而不是一一写出来。
使用我当前的代码,它在模式上显示对象中所有项目的名称,而不是实际的食物名称。
cTacoClicked
cTaco
bTacoClicked
bTaco
cBurritoSelected
cBurrito
它应该显示(同样,如果我逐个写出状态,它确实会像这样显示):
Chicken Taco
Beef Taco
Chicken Burrito
我怎样才能正确地使用循环来使这种情况动态发生。
这是我的代码:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Modal from 'react-modal';
import Aux from '../../../../hoc/Aux';
import FoodButton from '../FoodButtons/FoodButton';
import CheckoutButton from '../CheckoutButton/CheckoutButton';
import axios from '../../../../axios-foodChosen';
import { CLOSE_MODAL, OPEN_MODAL } from "../../../../store/action/NoNameAction";
class TacoTypes extends Component {
state = {
items: {
cTacoClicked: false,
cTaco: '',
bTacoClicked: false,
bTaco: '',
cBurritoSelected: false,
cBurrito: ''
}
}
componentWillMount() {
// for modal
Modal.setAppElement('body');
}
chickenTaco() {
// modal
const cTacoSelected = "Chicken Taco";
this.setState({cTacClicked: true, cTaco: cTacoSelected});
}
beefTaco() {
// modal
const bTacoSelected = "Beef Taco";
this.setState({bTacoClicked: true, bTaco: bTacoSelected});
}
chickenBurrito() {
// modal
const cBurritoSelected = "Chicken Burrito";
this.setState({cBurritoSelected: true, cBurrito: cBurritoSelected });
}
render() {
return (
<Aux>
<FoodButton clicked={() => this.chickenTaco()} label={"Chicken Taco"}/>
<FoodButton clicked={() => this.beefTaco()} label={"Beef Taco"}/>
<FoodButton clicked={() => this.chickenBurrito()} label={"Chicken Burrito"}/>
<CheckoutButton clicked={() => this.props.openModalRedux()}/>
<Modal isOpen={this.props.isOpen}>
<p>
{
Object.keys(this.state.items).map(i => (
<p>{i}</p>
))
}
</p>
<button onClick={() => this.props.closeModalRedux()}>Close</button>
</Modal>
</Aux>
);
}
}
const mapStateToProps = state => {
return {
// props for modal
isOpen: state.global.isModalOpen,
}
};
const mapDispatchToProps = dispatch => {
return {
// Modal handlers
openModalRedux: () => dispatch({type: OPEN_MODAL}),
closeModalRedux: () => dispatch({type: CLOSE_MODAL})
}
};
export default connect(mapStateToProps, mapDispatchToProps)(TacoTypes);
解决方案
您当前只是使用items
对象的键。您想获取键在state
对象中的值。
<Modal isOpen={this.props.isOpen}>
<p>
{Object.keys(this.state.items).map(key => (
<p key={key}>{this.state[key]}</p>
))}
</p>
<button onClick={() => this.props.closeModalRedux()}>Close</button>
</Modal>
推荐阅读
- c# - c#代码从文本文件中检查字符串值
- ocaml - 以外的任何字符
- python - 在python中打开对话框时主窗口获得焦点
- java - 从 Post Method Json 数据到 Android Studio 中的 Listview 的 CheckBox TextView?
- git - Git拒绝了非快进的gh-pages
- ssl - Tomcat证书问题
- scala - 特征和案例类继承问题:scala
- python - Kafka 从 web api 获取数据并写入弹性搜索
- javascript - JavaScript 表单中的过时值问题
- amazon-web-services - 如何设置 SageMaker GrountTruth 标签作业的“任务标题”