react map遍历
render(){ return ( <ul className={style.decoratewrapper}> { this.state.decoratedata.map((item,i) => ( <li key={i}> <div className={style.img}><img src={require("./images/"+item.src+".jpg")} /></div> <List> <Item extra={ <Button className={style.used} type={item.type} size="small" inline>使用中</Button> }>{item.name}</Item> </List> </li> )) } </ul> ); }
上面的map写在return里面, 当加上点击事件时会出问题,需将map遍历写在return外面,如下:
clickButton (ind, usestate) { console.log(ind, usestate); }; render(){ let _this = this; let list = this.state.themedata.map((item,i) => ( <li key={i}> <div className={style.img}><img src={require("./images/"+item.src+".jpg")} /></div> <List> <Item extra={ <Button className={style.used} type={item.isUsing?"primary":"ghost"} size="small" inline onClick={ _this.clickButton.bind(this, i, item.isUsing) }>{item.isUsing ? "使用中" : "使用"}</Button> }>{item.name}</Item> </List> </li> )); return ( <ul className={style.themewrapper}> {list} </ul> ); }

浙公网安备 33010602011771号