2016-06-29 10 views
0

これはReact.componentコードです。 OnClickイベントをページの初期化時に実行され、私はこの問題を解決カント、私はmapingの上に2プルのonClickを試してみましたが、これは何の意味がありません:onClickの事前初期化に反応する

handleClick (id){ 
     alert(id); 
    } 

    render() { 
     var tmp = this.handleClick; 
     return(
      <div className="thirteen wide column"> 
       <div className="rrc-title">Магазины, нарушающие РРЦ</div> 
       <div className="custom-hr"></div> 
       <div className="ui grid"> 
        { 
         jsonResult.data.map(function(el){ 
          return (

           <div className="three wide column"> 
            <div className="store-item-bad" onClick={tmp(el.siteId)}> 
             <div className="siteName">{el.siteName}</div> 
             { 
              el.values.map(function(element){ 
               var processWidth ={ 
                background : element.color, 
                width: element.percent+'%' 
               } 
               return(
                <div className="BarItem"> 
                 <div className="progressBar"> 
                  <div className="ui tiny progress"> 
                   <div className="bar" style={processWidth}></div> 
                  </div> 
                 </div> 
                 <div className="progressCounter">{element.count}</div> 
                </div>) 

              }) 
             } 

            </div> 
           </div> 
          ); 
         }) 
        } 
       </div> 
       <div className="rrc-title">Магазины, соблюдающие РРЦ</div> 
       <div className="custom-hr"></div> 
       <div className="ui grid"> 
        { 
         jsonResult.data.map(function(el){ 
          return (
           <div className="three wide column"> 
            <div className="store-item-ok"> 
             <div className="siteName">{el.siteName}</div> 
             { 
              el.values.map(function(element){ 
               var processWidth ={ 
                background : element.color, 
                width: element.percent+'%' 
               } 
               return(
               <div className="BarItem"> 
                <div className="progressBar BarFloatingLeft"> 
                 <div className="ui tiny progress"> 
                  <div className="bar" style={processWidth}></div> 
                 </div> 
                </div> 
                <div className="progressCounter">{element.count}</div> 
               </div>) 

              }) 
             } 

            </div> 
           </div> 
          ); 
         }) 
        } 

       </div></div> 
     ); 
    } 

は、それは簡単なことだが、私は今焦点を合わせることができないので、私は必要ウルヘルプみんな:)

+0

クラスを使用して、または反応します。 createClass? –

答えて

0

試してみてください。

onClick={this.handleClick.bind(this,el.siteId)} or 
onClick={tmp.bind(this,el.siteId)} 

、マップに矢印funcを追加します。

map(e=>{}) 
+0

マップ –

+0

でこれを使用することはできませんが、これを解決するには これは更新ソリューションです4 my code //onClick={tmp.bind(this,el.siteId)} –

関連する問題