react小知识

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>
    )
}

复制代码