React tab 切换

矫情吗；* 2023-01-19 12:49 29阅读 0赞

打开文件

import React, { Component } from "react";
    import Hello from "../components/Hello";
    import { Button } from "antd";
    
    export default class Gong extends Component {
      state = {
        data: ["数据11", "数据22", "数据333"],
        addressJobs: [
          {
            address: "测试11111",
            jobs: ["测试11111", "测试11111", "测试11111", "测试11111"],
          },
          {
            address: "测试2222",
            jobs: ["2222", "22222", "22223", "22224"],
          },
          {
            address: "测试333333",
            jobs: ["3333331", "3333332", "3333333", "3333334"],
          },
         
        ],
        jobssss: [],
      };
    
      // 初始化的时候选中第一个
      // 组件渲染后调用钩子
    //   active  默认的样式
      componentDidMount() {
        // 获取所有指定类名
        document.getElementsByClassName("adress-item")[0].className =
          "adress-item active";
        this.setState({
          jobssss: this.state.addressJobs[0].jobs,
        });
      }
      // tab切换
      adressNavClick = (val) => {
        document.getElementsByClassName("adress-item")[val].className =
          "adress-item active";
        this.state.addressJobs.forEach((item,indexs) => {
             console.log(item,"el, item")
             console.log(indexs)
          if (indexs === val) {
            this.setState({
              jobssss: item.jobs,
            });
          } else {
            document.getElementsByClassName("adress-item")[indexs].className =
              "adress-item";
          }
        });
      };
    
      render() {
        return (
          <div>
            {/* < Button   > Primary Button </Button>
                  <Button  type = "primary"> Default Button </Button> */}
            <div className="recruit-content">
              <ul className="adress-nav">
                {this.state.addressJobs
                  ? this.state.addressJobs.map((el, index) => {
                      return (
                        <li
                          className="adress-item"
                          key={index}
                          onClick={() => {
                            this.adressNavClick(index);
                          }}
                        >
                          {el.address}
                        </li>
                      );
                    })
                  : ""}
              </ul>
              <div className="jobs-wrapper">
                <ul className="jobs-list clearfloat">
                  {this.state.jobssss
                    ? this.state.jobssss.map((el, index) => {
                        return (
                          <li className="jobs-item" key={index}>
                            {el}
                          </li>
                        );
                      })
                    : ""}
                </ul>
              </div>
            </div>
            <div> 二级组件显示了吗 </div>
            <Hello shuju={this.state.data} />{" "}
          </div>
        );
      }
    }

css

.adress-nav {
        width: 300px;
        height: 50px;
        /* border: 1px solid firebrick; */
        display: flex;
        justify-content: space-around;
    }
    .adress-nav  .adress-item{
        padding: 0 30px;
        border: 1px solid rgb(95, 98, 95);
    
    }
    .adress-nav  .active {
        padding: 0 30px;
        border: 2px solid rgb(143, 13, 63);
    }