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

Detailed explanation of the JVM series memory model

Table of contents 1. Memory model and runtime dat...

How to install JDK8 on Windows

1. Download: http://www.oracle.com/technetwork/ja...

Application examples of WeChat applet virtual list

Table of contents Preface What is a virtual list?...

Six ways to reduce the size of Docker images

Since I started working on Vulhub in 2017, I have...

RHEL7.5 mysql 8.0.11 installation tutorial

This article records the installation tutorial of...

Steps to encapsulate the carousel component in vue3.0

Table of contents 1: Encapsulation idea 2. Packag...

Detailed explanation of the principle and usage of MySQL stored procedures

This article uses examples to explain the princip...

How to add website icon?

The first step is to prepare an icon making softwa...

Two ways to exit bash in docker container under Linux

If you want to exit bash, there are two options: ...

Ubuntu 16.04 mysql5.7.17 open remote port 3306

Enable remote access to MySQL By default, MySQL u...

Solution to Vue data assignment problem

Let me summarize a problem that I have encountere...

HTML+CSS project development experience summary (recommended)

I haven’t updated my blog for several days. I jus...

WeChat Mini Program User Authorization Best Practices Guide

Preface When developing WeChat applets, you often...

Examples of using HTML list tags dl, ul, ol

Copy code The code is as follows: <!-- List ta...