react-选项卡实现

最新推荐文章于 2024-04-28 08:11:29 发布

Cookie王

最新推荐文章于 2024-04-28 08:11:29 发布

阅读量195

点赞数

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_73337633/article/details/131519565

版权

该文章展示了一个React组件如何通过更新state中的activeIndex属性来改变元素的显示。当用户点击某个元素时，对应的activeIndex值会更新，进而影响渲染时的className，从而改变元素的颜色。CSS中定义了.active类以提供点击后的样式效果。

摘要由CSDN通过智能技术生成

state = {
  activeIndex: null
}

然后，在点击事件中更新activeIndex的值：

changeImage = (index) => {
  this.setState({ activeIndex: index });
}

最后，在渲染时根据activeIndex的值来判断是否给元素添加颜色：

<div className='btn'>
  {images.map((image, index) => (
    <div
      key={index}
      onClick={() => this.changeImage(index)}
      className={`ant-btnn ${this.state.activeIndex === index ? 'active' : ''}`}
    >
      {/* {index + 1} */}
    </div>
  ))}
</div>

在CSS中，你可以添加一个名为active的类来定义点击后的样式：

.ant-btnn.active {
  background-color: red;
}

全部代码：

import React, { Component } from 'react';
// import onelresize from '../../onelResize';
import Title from '../../Title/Title';
// 引入 ECharts 主模块
// 引入 ECharts 主模块
// import ReactEcharts from 'echarts-for-react'
// 引入moment.js
// import moment from 'moment';
// import {getMaxAndIndex, getMinAndIndex} from '../../utils/array-util'
// 引入仪表盘
// import 'echarts/lib/chart/gauge';
// 引入提示框和标题组件
// import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/title';
// import { Carousel } from 'antd';
import './retail-package.less';
import {retailPackage} from '../../../../actions/getAnalysisService';
import moment from 'moment/moment';
import img1 from '../../../img/retail-package/pie-y.png';
import img2 from '../../../img/retail-package/pie-b.png';
import img3 from '../../../img/retail-package/pie-g.png';
import img4 from '../../../img/retail-package/pie-p.png';
import img11 from '../../../img/retail-package/info-y.png';
import img22 from '../../../img/retail-package/info-b.png';
import img33 from '../../../img/retail-package/info-g.png';
import img44 from '../../../img/retail-package/info-p.png';
// import { Button } from 'antd';

class Echart extends Component {
   constructor(props) {
      super(props);
      this.state = {
         currentImageIndex: 0,
      };
   }
   componentDidUpdate(prevProps) {
      if(this.props.month !== prevProps.month) {
         this.getInfo();
      }
   }
   componentWillMount() {
      this.getInfo();
   }
   getInfo = () =>{
      let {month} = this.props;
      let date = moment(month).format('YYYY-MM') + '-01';
      retailPackage(date, (json)=>{

      });
   }
   changeImage = (newIndex) => {
      this.setState({ currentImageIndex: newIndex });
   };
   render() {
      const images = [img1, img2, img3, img4];
      const images2 = [img11, img22, img33, img44];

      return (
      //    <div style={{display: 'flex'}}>
      //   <img src={images[this.state.currentImageIndex]} alt="" />
      //   <img src={images2[this.state.currentImageIndex]} alt="" />
      //   <div >
      //     {images.map((image, index) => (
      //       <Button key={index} onClick={() => this.changeImage(index)}>
      //         {index + 1}
      //       </Button>
      //     ))}
      //   </div>
      // </div>
         <div className='retailPackage hascorner'>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <Title alt='“开放式” 零售套餐'/>
            <div className='package-box'>
               <div className='package-legend'>
                  <div className="package-icon">
                     <div className="electricity-circular">
                        <span></span><div style={{fontSize: '16px'}}>“不分时一口价”</div>
                     </div>
                     <div className="electricity-circular">
                        <span></span><div style={{fontSize: '16px'}}>“分时一口价”</div>
                     </div>
                     <div className="electricity-circular">
                        <span></span><div style={{fontSize: '16px'}}>市场联动价格</div>
                     </div>
                     <div className="electricity-circular">
                        <span></span><div style={{fontSize: '16px'}}>组合</div>
                     </div>
                  </div>
               </div>
               <div style={{flex: 1, display: 'flex', marginTop: '40px'}}>
                  <div className='package-picture1'>
                     <img src={images[this.state.currentImageIndex]} alt="" />
                  </div>
                  <div className='package-picture2'>
                     <img src={images2[this.state.currentImageIndex]} alt="" />
                  </div>
                  <div  className='btn'>
                     {images.map((image, index) => (
                        <div key={index} onClick={() => this.changeImage(index)}  className={`ant-btnn ${this.state.currentImageIndex === index ? 'active' : ''}`}>
                           {/* {index + 1} */}
                        </div>
                     ))}
                  </div>
               </div>
            </div>
         </div>
      );
   }
}

export default Echart;