Javascript onClick事件返回每个模式而不是单个模式

我正在尝试使用React和Redux构建一个类似危险的游戏。目前，我为每个

li

设置了一个onClick事件，但每当我单击它时，就会弹出每个模式，而不是附加到该

li

项的模式。我的代码在不同的文件中分开，但我相信这两个文件是我需要显示的唯一文件：

const ModalView = React.createClass({

  pass: function(){
    console.log('pass clicked');
    store.dispatch({type:"MODAL_TOGGLE"})
  },
  submit: function(){
    console.log('submit clicked');
    store.dispatch({type:"MODAL_TOGGLE"})

  },

  render: function(){
    let question = this.props.question
    let category = this.props.category
    let answer = this.props.answer
    let val = this.props.value

    return (
      <div>
        <div className="modal">
          <p>{category}</p>
          <p>{question}</p>
          <p>{answer}</p>
          <p>{val}</p>

          <input
          type="text"
          placeholder="type in your answer">
          </input>
          <button onClick={this.submit}>Submit</button>
          <button onClick={this.pass}>Pass</button>

        </div>
      </div>

    )
  }

})

const ModalView=React.createClass({
通过：函数（）{
log（'passclicked'）；
dispatch（{type:“MODAL_TOGGLE”}）
},
提交：函数（）{
log（'submit clicked'）；
dispatch（{type:“MODAL_TOGGLE”}）
},
render:function（）{
让问题=this.props.question
让category=this.props.category
让答案=this.props.answer
设val=this.props.value
返回(
{类别}

{问题}

{答案}

{val}

提交
通过
)
}
})

和价值观

const ValuesView = React.createClass({
  modalPopUp: function(value){
    store.dispatch({type:"MODAL_TOGGLE"})
  },
  render: function(){
    let showClass = "show-content"
    let hideClass = "hide-content"
    if (this.props.modal){
      showClass = "hide-content"
      hideClass = "show-content"
    }
    return (<div>
      <ul className="list">
        {this.props.datum.clues.slice(0,5).map((data, i) => {
          if (data.value === null){
            return <div>
                    <div className={hideClass}>
                      <ModalView
                      category = {this.props.category}
                      question = {data.question}
                      answer = {data.answer}
                      value ={data.value} />
                    </div>
                    <li onClick={this.modalPopUp} key={i}>$600</li>
                  </div>
          }
          return   <div>
                    <div className={hideClass}>
                      <ModalView
                      category = {this.props.category}
                      question = {data.question}
                      answer = {data.answer}
                      value ={data.value}/>
                    </div>
                    <li
                    category = {this.props.category}
                    onClick={this.modalPopUp} key={i}>${data.value}</li>
                  </div>
        })}
      </ul>
        </div>
    )
  }
})

const ValuesView=React.createClass({
modalPopUp：函数（值）{
dispatch（{type:“MODAL_TOGGLE”}）
},
render:function（）{
让showClass=“显示内容”
让hideClass=“隐藏内容”
如果（本道具模态）{
showClass=“隐藏内容”
hideClass=“显示内容”
}
返回(

{this.props.datum.clues.slice（0,5）.map（（数据，i）=>{
如果（data.value==null）{
返回
600美元
}
返回
${data.value}
})}

)
}
})

---

我如何只显示相应的模态而不是每个模态？谢谢

如果您只想编写real-Modal代码，我建议您使用一些已经实现的组件，比如（我不是说它是强制性的，甚至在我建议的示例中，它也可能是其他的）

我认为

store.dispatch（{type:“MODAL_TOGGLE”}）

以某种方式在

true

和

false

之间切换

MODAL

prop。然后，您只需使用该标志切换一个类来显示或隐藏我猜的内容（我需要看到您的css）

这种方法的问题是（除此之外，由于许多原因，这不是最好的方法），您对

线索

数组中的每个项目都使用相同的类

在某种程度上，您需要存储要显示的“模式”，然后在渲染中，只需将show类应用于此项

也许：

const ValuesView = React.createClass({
  modalPopUp: function(index){
    return function (event) {
      store.dispatch({
        type:"MODAL_TOGGLE",
        payload: {
          modalIndex: index // Save modalIndex prop
        }
      })
    }
  },
  render: function(){
    return (<div>
      <ul className="list">
        {this.props.datum.clues.slice(0,5).map((data, i) => {
          if (data.value === null){
            return <div>
                    <div className={(this.prosp.modal && this.props.modalIndex === i) ? "show-content" : "hide-content"}>
                      <ModalView
                      category = {this.props.category}
                      question = {data.question}
                      answer = {data.answer}
                      value ={data.value} />
                    </div>
                    <li onClick={this.modalPopUp(i)} key={i}>$600</li>
                  </div>
          }
          return   <div>
                    <div className={(this.prosp.modal && this.props.modalIndex === i) ? "show-content" : "hide-content"}>
                      <ModalView
                      category = {this.props.category}
                      question = {data.question}
                      answer = {data.answer}
                      value ={data.value}/>
                    </div>
                    <li
                    category = {this.props.category}
                    onClick={this.modalPopUp(i)} key={i}>${data.value}</li>
                  </div>
        })}
      </ul>
        </div>
    )
  }
})

const ValuesView=React.createClass({
modalpoup：函数（索引）{
返回函数（事件）{
仓库调度({
类型：“模式切换”，
有效载荷：{
modalIndex:index//Save modalIndex prop
}
})
}
},
render:function（）{
返回(

{this.props.datum.clues.slice（0,5）.map（（数据，i）=>{
如果（data.value==null）{
返回
600美元
}
返回
${data.value}
})}

)
}
})