React 在Render的時候自動執行了onClick事件
阿新 • • 發佈:2019-04-03
ret 沒有 change 問題 his name The enter text
寫法有誤
1 { 2 this.state.baseLayers.length>0?( 3 this.state.baseLayers.map(item => { 4 return ( 5 <div key={item.id}> 6 <BaseMapItem theme={item.img} onClick={this.baseMapChange(item.id)}/> 7<div style={{textAlign:‘center‘}}>{item.name}</div> 8 </div> 9 ) 10 }) 11 ): 12 ( 13 <div>沒有圖層數據...</div> 14 ) 15 }
我的綁定事件想要直接帶著參數item.id去執行,這是不允許的,恰好我的baseMapChange事件裏面有setState,導致溢出了,不然我可能還發現不了這個問題
解決方案一:
1 { 2 this.state.baseLayers.length>0?( 3 this.state.baseLayers.map(item => { 4 return ( 5 <div key={item.id}> 6 <BaseMapItem theme={item.img} onClick={this.baseMapChange.bind(this,item.id)}/> 7<div style={{textAlign:‘center‘}}>{item.name}</div> 8 </div> 9 ) 10 }) 11 ): 12 ( 13 <div>沒有圖層數據...</div> 14 ) 15 }
解決方案二:
{ this.state.baseLayers.length>0?( this.state.baseLayers.map(item => { return ( <div key={item.id}> <BaseMapItem theme={item.img} onClick={()=> this.baseMapChange(item.id)}/> <div style={{textAlign:‘center‘}}>{item.name}</div> </div> ) }) ): ( <div>沒有圖層數據...</div> ) }
React 在Render的時候自動執行了onClick事件