Klasse Active in React hinzufügen

1. die classNames-Attribute in React
2. Aktiv zu einem Button classNames in React hinzufügen
3. Abschluss

Um zu bewirken, dass nur ein classNames aktiv ist, wenn Apps mit dem React-Framework erstellt werden. Sobald wir versuchen, einen classNames aktiv zu machen, werden die anderen classNames aktiv.

Wir werden nun in diesem Artikel diskutieren, wie Sie diese Situation lösen können.

die classNames-Attribute in React

Wir verwenden class in HTML als Referenz, wenn wir die Webseite mit CSS stylen wollen, aber wir können in React keine class verwenden, da das Wort für eine andere Funktion reserviert ist. Hier werden classNames als Ersatz für Klassen in React nützlich.

classNames sind nützlich, wenn wir eine bestimmte Funktion für eine bestimmte Komponente erstellen möchten, wie wir am Beispiel des Buttons classNames sehen werden.

Stellen wir uns eine Gruppe von Schaltflächen mit der Farbe Grün vor. Wenn keine dieser Schaltflächen angeklickt wird, bleiben sie grün, aber sie werden rot, wenn eine Schaltfläche angeklickt wird, was bedeutet, dass sie aktiv ist.

Wir werden in diesem Tutorial besprechen, wie Sie die angeklickte Schaltfläche blau färben können, ohne dass der Rest der Schaltflächen blau wird, indem Sie einer Schaltfläche eine aktive Klasse hinzufügen.

Aktiv zu einem Button classNames in React hinzufügen

Erstellen Sie zunächst ein neues Webprojekt, npx create-react-app examplefour. Fahren Sie dann mit der app.js fort, um die folgenden Codes zu erstellen.

Code - App.js:

import React, { useState } from "react";
import styled from "styled-components";

const theme = {
  blue: {
    default: "#3f51b5",
    hover: "#283593"
  },
  pink: {
    default: "#e91e63",
    hover: "#ad1457"
  }
};

const Button = styled.button`
  background-color: ${(props) => theme[props.theme].default};
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  outline: 0;
  text-transform: uppercase;
  margin: 10px 0px;
  cursor: pointer;
  box-shadow: 0px 2px 2px lightgray;
  transition: ease background-color 250ms;
  &:hover {
    background-color: ${(props) => theme[props.theme].hover};
  }
  &:disabled {
    cursor: default;
    opacity: 0.7;
  }
`;

Button.defaultProps = {
  theme: "blue"
};

function clickMe() {
  alert("You clicked me!");
}

const ButtonToggle = styled(Button)`
  opacity: 0.7;
  ${({ active }) =>
    active &&
    `
    opacity: 1;
  `}
`;

const Tab = styled.button`
  padding: 10px 30px;
  cursor: pointer;
  opacity: 0.6;
  background: white;
  border: 0;
  outline: 0;
  border-bottom: 2px solid transparent;
  transition: ease border-bottom 250ms;
  ${({ active }) =>
    active &&
    `
    border-bottom: 2px solid black;
    opacity: 1;
  `}
`;
const types = ["Cash", "Credit Card", "Bitcoin"];

function ToggleGroup() {
  const [active, setActive] = useState(types[0]);
  return (
    <div>
      {types.map((type) => (
        <ButtonToggle active={active === type} onClick={() => setActive(type)}>
          {type}
        </ButtonToggle>
      ))}
    </div>
  );
}

export default function App() {
  return (
    <>
      <ToggleGroup />
    </>
  );

Wir verwenden React-Hooks, um zu verfolgen, welche Schaltfläche aktiv ist, wenn sie angeklickt wird, die sogenannten ToggleGroup- und ButtonToggle-Funktionen. Wenn dann die Ereignis-Listener-Funktion onClick aktiviert ist und auf eine der Schaltflächen geklickt wird, werden nur die an diese Schaltfläche angehängten classNames aktiv.

Dann haben wir etwas Styling hinzugefügt, um die angeklickten Schaltflächen von den inaktiven zu unterscheiden. Als nächstes codieren wir ein bisschen in der index.js wie im folgenden Snippet.

Code - index.js:

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Ausgang:

Abschluss

Ein Versuch eines Benutzers, eine einzelne Schaltfläche von den übrigen Schaltflächen zu aktivieren, kann sich als sehr hartnäckige Aufgabe erweisen. Die Anwendung der Funktion ToggleGroup zusammen mit dem Ereignis-Listener onClick ist eine einfache Möglichkeit, die Situation zu überwinden.