onClickイベントが単一モーダルではなくすべてのモーダルを返す

Question

私はReactとReduxを使ってJeopardyのようなゲームを構築しようとしています。私は現在、それぞれliに設定されたonClickイベントを持っていますが、クリックするたびに、すべてのModalがそのliアイテムに接続されているものの代わりにポップアップ表示されます。私は私のコードは、別のファイルに分けていますが、私はこれらの2つのファイルは、私は表示する必要が唯一のものであると考えて：

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

をどのように私は唯一に対応するモーダルを得ることについて行くだろうすべての代わりに表示？ありがとう!!

Answer 1

あなただけの本物のモーダルをコーディングする場合、私はあなたがhttps://github.com/reactjs/react-modalのようないくつかすでに実装されたコンポーネントを使用することをお勧め（私は言わないよ必須であり、またしても私はお勧めの例を聖霊降臨祭、他の可能性）

私は思います何らかの形でstore.dispatch({type:"MODAL_TOGGLE"})がmodalの小道具をtrueとfalseの間でトグルします。次に、そのフラグを使用してクラスを切り替えて、私が推測するコンテンツを表示または非表示にします（あなたにはCSSが必要です）。

clues配列内のすべてのアイテムに同じクラスを使用しているという点で、このアプローチの問題点があります（これは多くの理由でこれを行う最良の方法ではありません）。

どのような方法で表示する "モーダル"であるかを保存し、次にレンダリングでこのアイテムに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> 
    ) 
    } 
})