Question

我正在尝试使用React和Redux构建类似Jeopardy的游戏。我目前有一个onClick事件设置为每个li，但每当我点击它时，我会弹出每个模态，而不是附加到该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>

    )
  }

})

和ValuesView

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>
    )
  }
})

我如何才能显示相应的Modal而不是每一个？谢谢！

Answer 1

如果你只想编写真正的Modal代码我建议你使用一些已经实现过的组件，比如https://github.com/reactjs/react-modal（我不是说强制性的，甚至不是我建议的例子，也可能是其他的）< / p>

我认为store.dispatch({type:"MODAL_TOGGLE"})以某种方式在modal和true之间切换false道具。然后你只需使用该标志切换一个类来显示或隐藏我想的内容（我需要看到你的CSS）。

这种方法的问题是（除了出于多种原因这不是最好的方法）你对clues数组中的每个项使用相同的类。

在某种程度上，你需要存储哪个是＆＃34;模态＆＃34;你想要显示，然后在渲染中，只需将show class应用于此项目。

也许：

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>
    )
  }
})

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

1 个答案: