React handwriting tab switching problem

React handwriting tab switching problem

insert image description here

Parent File

import React, { useState } from 'react';
// import Module1 from './Module1';
// import Module2 from './Module2';
// import Module3 from './Module3';
// import Module4 from './Module4';
import HeaderTtabs, { tagType } from '@/components/Task/Tree/Common/component/TabsContent/ListContent/HeadTabs';
import { divide } from 'lodash';

export default function (props: any) {

  const tabsList: tagType[] = [
    { name: 'xxx situation' },
    { name: 'Cultivate xxxxx', disabled: false },
    { name: 'Close xxxx', disabled: false },
    { name: '科xxxx', disabled: false },
    { name: '人xxxx', disabled: false },
  ];
  const [checkedTag, setCheckedTag] = useState(tabsList[0])
  return (<div>
    <HeaderTtabs tabsList={tabsList} checkedTag={checkedTag} setCheckedMenu={(tab) => setCheckedTag(tab)} />
    <div className={`pt5 px20 pb20`}>
    {checkedTag.name === tabsList[0].name && <div>11</div>}
      {checkedTag.name === tabsList[1].name && <div>22</div>}
      {checkedTag.name === tabsList[2].name && <div>33</div>}
      {checkedTag.name === tabsList[3].name && <div>44</div>}
      {checkedTag.name === tabsList[4].name && <div>55</div>}
      {/* {checkedTag.name === tabsList[0].name && <Module1 />}
      {checkedTag.name === tabsList[1].name && <Module2 />}
      {checkedTag.name === tabsList[2].name && <Module3 />}
      {checkedTag.name === tabsList[3].name && <Module4 />} */}
    </div>
  </div>);
}

Subfiles

import style from './index.scss';
import React from 'react';
import { message } from 'antd';

// Tag type export type tagType = {
  name: string, // tag name, unique disabled?: boolean // whether to disable }

/**
 * Subpage tab bar * @param props
 */
export default function(props: {
  tabsList: tagType[], // tag list checkedTag: tagType, // currently selected tag setCheckedMenu: (menu: tagType) => void // tag click callback }) {
  const {tabsList, checkedTag, setCheckedMenu} = props
  const setCheck = (menu: tagType) => {
    if (menu.disabled) {
      message.warning('Function not yet available');
      return
    }
    setCheckedMenu(menu)
  }
  return (<div className={`${style.tag_area} ${style.epidemic_area}`}>
    {
      tabsList.map((item) => (
        <div className={`${style.tag} ${checkedTag.name === item.name ? style.checked : ''} ${style.epidemic}`} key={item.name} onClick={() => setCheck(item)}>
          {item.name}
        </div>
      ))
    }
  </div>)
}

Sub-file-tab style:

insert image description here

.tag_area {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
  background-color: #fff;
  margin-bottom: 20px;
  @media only screen and (max-width: 768px) {
    & {
      margin-top: 10px;
    }
  }
}

.tag {
  // flex: 1;
  //margin: 0 15px;
  min-width: 130px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  height: 50px;
  color: #333;
  cursor: pointer;
  transition: .3s all;
  // box-shadow: 5px 3px 4px #999;
  font-size: 18px;
  // border-radius: 10px;
  border-radius: 6px 6px 0px 0px;
  @media only screen and (max-width: 768px) {
    & {
      font-size: 14px;
      margin: 0 5px;
      min-height: 30px;
      text-align: center;
      padding: 5px;
    }
  }

  &.checked {
    color: #fff;
    background-color: #1E9FFF;
  }
  &:hover {
    color: #fff;
    background-color: #1E9FFF;
  }
}


// Four tab styles for Zhejiang epidemic prevention.epidemic_area{
  justify-content: left;
  margin: 10px 20px;
  padding:10px;
}

.epidemic{
  margin:0 10px;
  width: 200px;
  background: rgba(20, 146, 255, 0.1);
  border: 1px solid #1492FF;
  box-sizing: border-box;
  border-radius: 4px;
  height: 44px;
}

This is the end of this article about React handwriting tab switching. For more relevant React tab switching content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • React antd tabs switching causes repeated refresh of subcomponents
  • React implements sample code similar to Taobao tab center switching effect
  • React-native method of dynamically switching tab components
  • Sample code for implementing tab switching via event parameter passing in React component
  • Use ReactJS to implement tab page switching, menu bar switching, accordion switching and progress bar effects

<<:  gbk utf8 How to choose to correctly understand and use GBK and UTF-8 web page encoding

>>:  Design Theory: Text Legibility and Readability

Recommend

Steps to create your own YUM repository

To put it simply, the IP of the virtual machine u...

MySQL 5.7.17 installation and configuration tutorial under CentOS6.9

CentOS6.9 installs Mysql5.7 for your reference, t...

Steps to set up Windows Server 2016 AD server (picture and text)

Introduction: AD is the abbreviation of Active Di...

VMware vSphere 6.7 (ESXI 6.7) graphic installation steps

Environment: VMware VCSA 6.7 (VMware-VCSA-all-6.7...

MySQL Database Basics: A Summary of Basic Commands

Table of contents 1. Use help information 2. Crea...

Linux file system operation implementation

This reading note mainly records the operations r...

Example analysis of interval calculation of mysql date and time

This article uses an example to describe the inte...

In-depth understanding of Vue's plug-in mechanism and installation details

Preface: When we use Vue, we often use and write ...

Vue implements seamless scrolling of lists

This article example shares the specific code of ...

MySQL 8.0.21 installation steps and problem solutions

Download the official website First go to the off...

Layim in javascript to find friends and groups

Currently, layui officials have not provided the ...

Vue simple implementation of turntable lottery

This article shares the specific code of Vue to s...

Docker installs mysql and solves the Chinese garbled problem

Table of contents 1. Pull the mysql image 2. Chec...

Native js to realize bouncing ball

On a whim, I wrote a case study of a small ball b...