1. 程式人生 > >React 在Render的時候自動執行了onClick事件

React 在Render的時候自動執行了onClick事件

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事件