ReactDemo-----tab标签切换按钮

tab标签切换按钮

1. 效果：
点击哪个标签，哪个标签的样式发生变化

2. 核心思想：
1）需要在state中保存一个当前选中的标签的id，当用户选择的标签发生变化就来改变它。
2）需要给tab标签的样式style属性绑定一个事件，用来改变它的样式（做一个判读：如果id和当前id相等样式就为A，不一样的话就为B）。
3）需要给tab标签绑定一个点击事件，当用户点击的时候获取到当前tab标签的id，将该id更新到state中。

3. 代码：

this.state = {
      selectedId: '',
};

//点击tab
  clickTabsInSon = val => {
    const { clickTabs } = this.props;
    clickTabs(val);
    this.setState({
      selectedId: val,
    });
  };

//修改样式
  changeTabStyles = id => {
    const { selectedId } = this.state;
    if (id === selectedId) {
      return {
        color: '#44536f',
        borderBottom: '#44536f 2px solid',
      };
    } else {
      return {
        color: '#999',
        borderBottom: '#ebebeb 2px solid',
      };
    }
  };

render() {
    const { tabArray, totalValue } = this.props;

    return (
      <div className={styles.main}>
        { tabArray &&
          tabArray.map(item => {
            return (
              <div
                style={this.changeTabStyles(item.id)}
                className={styles.tabArray}
                onClick={() => this.clickTabsInSon(item.id)}
              >
                {item.name}
                {/*({item.value})*/}
              </div>
            );
          })}
      </div>
    );
  }