如何打开列表内的其他模式？

Question

我正在使用react并有一个包含图像的列表，将鼠标悬停在图像上会显示文本，单击时会打开一个模态，但是每个“ li”在模态中都有不同的内容。问题在于列表中的每个项目仅打开一个模态，最后一个，我该怎么做才能打开正确的模态？

模式代码

constructor(props) {
      super(props);
      this.state = {
          visible : false
      }
    }

    openModal() {
        this.setState({
            visible : true,
        });
    }

    closeModal() {
        this.setState({
            visible : false,
        });
    }

带有模式的列表

<li className="bor">
      <img src={bor}/>
      <span className="first">teste</span>
      <span className="second">veja o case completo</span>
       <input type="button" onClick={() => this.openModal()} />
       <section>
        <Modal className="modal" visible={this.state.visible}       width="90%" height="90%" effect="fadeInUp" onClickAway={() =>   this.closeModal()}>
           <div className="close">
            <a href="javascript:void(0);" onClick={() => this.closeModal()}>X</a>
            </div>
            <div>
             <h1>teste1</h1>
            </div>
          </Modal>
         </section>
                  </li>
 <li className="baz">
     <img src={baz}/>
     <span className="first">teste2</span>
     <span className="second">veja o case completo</span>
     <input type="button" onClick={() => this.openModal()} />
     <section>
       <Modal className="modal" visible={this.state.visible} width="90%" height="90%" effect="fadeInUp" onClickAway={() => this.closeModal()}>
        <div className="close">
            <a href="javascript:void(0);" onClick={() => this.closeModal()}>X</a>
         </div>
         <div>
           <h1>teste2</h1>
          </div>
        </Modal>
       </section>
   </li>

Answer 1

正如@FatemehQasemkhani所说，最佳做法是使用单模态并传递如下所示的相应数据。我以相同的方式批准了，并且效果很好。我正在项目内部获取一些虚拟数据。每当用户单击任何list（li）项时，我都会将该当前单击的项存储在activeItemData中，并以模态形式传递该值。

import React, { Component } from "react";
import Modal from "react-awesome-modal";

class ProList extends Component {
     constructor(props) {
      super(props);
      this.state = {
         visible: false,
         activeItemData: "",
         items: [
           {
              desc: "this is item 1 "
           },
           {
              desc: "this is item 2"
           }
         ]
       };  
     }

     closeModal() {
       this.setState({
       visible: false
       });
     }


     handleCurrentItem = item => {
         // you can set two properties in setState or you can set visible property in callback also...
        this.setState(
         {
           activeItemData: item.desc,
           visible:true
         },
         // () => this.setState({ visible: true })
        )
     };

     render() { 

         return (

              <div>

                  <ul>
                     { this.state.items.map(item => (
                        <li key={item.desc} onClick={() => this.handleCurrentItem(item)}>
                           {item.desc}
                        </li>
                     ))}
                  </ul>

                 <Modal
                     className="modal"
                     visible={this.state.visible}
                     width="90%"
                     height="90%"
                     effect="fadeInUp"
                     onClickAway={() => this.closeModal()}
                 >

                         <div className="close">
                             <a href="javascript:void(0);" onClick={() => this.closeModal()}>
                                  X
                             </a>
                         </div>
                         <div>
                              <h1>{this.state.activeItemData}</h1>
                         </div>
                 </Modal>
              </div>

         )

     }
}