Agregar clase activa en React

1. los atributos classNames en React
2. Agregar Active a un botón classNames en React
3. Conclusión

Para hacer que solo un nombre de clase esté activo al crear aplicaciones con el marco React. Una vez que intentamos activar un classNames, los otros classNames se activan.

Ahora discutiremos en este artículo cómo resolver esta situación.

los atributos classNames en React

Usamos clase en HTML como referencia cuando queremos diseñar la página web con CSS, pero no podemos usar una clase en React porque la palabra está reservada para una función diferente. Aquí es donde classNames se vuelve útil como reemplazo de las clases en React.

Los classNames son útiles cuando queremos crear una función específica para un componente en particular, como veremos con el ejemplo del botón classNames.

Imaginemos un grupo de botones con el color verde. Cuando no se hace clic en ninguno de estos botones, permanecen verdes, pero se vuelve rojo cuando se hace clic en un botón, lo que significa que está activo.

Discutiremos en este tutorial cómo hacer que el botón en el que se hizo clic se vuelva azul sin que el resto de los botones se vuelvan azules agregando una clase activa a un botón.

Agregar Active a un botón classNames en React

Comience creando un nuevo proyecto web, npx create-react-app examplefour. Luego pase a app.js para colocar los siguientes códigos.

Código - 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 />
    </>
  );

Usamos ganchos de React para rastrear qué botón está activo cuando se hace clic, llamados funciones ToggleGroup y ButtonToggle. Luego, con la función de escucha de eventos onClick configurada como activa, una vez que se hace clic en uno de los botones, solo se activan los nombres de clase adjuntos a ese botón.

Luego agregamos algunos estilos para diferenciar el botón en el que se hizo clic de los inactivos. A continuación, hacemos un poco de codificación en index.js como en el siguiente fragmento.

Código - index.js:

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

import App from "./App";

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

Producción:

Conclusión

Un intento por parte de un usuario de activar un solo botón del resto de los botones puede resultar una tarea muy terca. Aplicar la función ToggleGroup junto con el detector de eventos onClick es una forma fácil de superar la situación.