我在 .map 中,我想在 .map 生成的每个 div 中创建模态
return (
{this.state.DataBook.map(function (item, i) {
return ( <div>
<Button color="danger" onClick={this.toggleModal}>test Modal</Button>
<Modal isOpen={this.state.modal} toggle={this.toggleModal} className={this.props.className} external={externalCloseBtn}>
<ModalHeader>Modal title</ModalHeader>
<ModalBody>
<b>{item.nom}</b><br />
Lorem ipsum
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggleModal}>Do Something</Button>{' '}
</ModalFooter>
</Modal>
</div>)},this)}
为了做到这一点,我调用了 toggleModal
toggleModal() {
this.setState({
modal: !this.state.modal
});
}
有了这个,我的所有模态都具有相同的内容,但我不知道如何修复它。 有什么想法吗?
最佳答案
这是一个运行此代码的工作代码沙箱:https://codesandbox.io/s/rmxp8nxm74
为了能够通过映射数组单独识别来自 JSX 的事件,您必须将标识符传递给被调用的 openModal 方法:
openModal = id => {
this.setState({ openedModal: id });
};
closeModal = () => {
this.setState({ openedModal: null });
};
render() {
return this.state.DataBook.map((item, i) => (
<div key={item.id}>
<Button color="danger" onClick={() => this.openModal(item.id)}>
test Modal
</Button>
<Modal
isOpen={this.state.openedModal === item.id}
toggle={this.closeModal}
>
<ModalHeader>Modal title</ModalHeader>
<ModalBody>
<b>{item.nom}</b>
<br />
Lorem ipsum
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.closeModal}>
Do Something
</Button>
</ModalFooter>
</Modal>
</div>
));
}
编辑:我创建了不同的打开/关闭方法,因此您可以通过外部调用轻松关闭事件模式(无需传递参数)。
编辑 2:您还有一个替代选项:让单个动态 Modal
将状态集传递给它 onClick(性能可能更好,但更难管理模态中的不同点击事件)
关于javascript - .map 中的多模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48947584/