javascript - .map 中的多模式

Question

我在 .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
    });
}

有了这个，我的所有模态都具有相同的内容，但我不知道如何修复它。有什么想法吗？

Answer 1

这是一个运行此代码的工作代码沙箱: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(性能可能更好，但更难管理模态中的不同点击事件)