react实现选项卡切换
this.state = {
currIndex: 0,//当前选中的tab 默认为第一个
tabList: ['111','222','333','444']//选项卡tab
}
复制代码
//循环出tab,在每个tab上增加点击事件,点击之后执行方法
this.toogleRank(index),并把当前的Index传过去,
{this.state.tabList.map((item,index) => {
return (
<div onClick={(e) => this.toogleRank(index)}
className={ index == currIndex ? 'selected' : ''}
key={index}>item</div>)
})
复制代码
toogelRank方法将当前的 currIndex设置为点击时候获取到的index,从而触发render方法 实现tab切换,可以在这个方法里面 调接口以更新模块内容
toogleRank(index){
this.setSate ={
currIndex: index
}
}
复制代码
react中将带标签的字符串转义为html解析(如后端返回的数据带有html标签的)
return (
<div>{props.record.contents.map(value =>
(
<div className={styles.expendBlock}>
<p dangerouslySetInnerHTML={{ __html: value.content }} />
</div>
)
)}
</div>
)
复制代码
react获取input框中的数据
getNumber() {
let mobile = this.ref.mymobile.value;//获取到的手机号码
}
render() {
return (
<input type="tel" ref="mymobile" placeholder="请输入手机号" />
<div onClick={this.getNumber}></div>
)
}
复制代码