3

estoy intentando resolver un pequeño ejercicio en reactjs, soy nuevo iniciando en este framework y requiero hacer lo siguiente: Tengo cierta cantidad de DIV un ejemplo 1000. la idea es que cuando haga click en uno se cambie de color como si hiciera un focus ( esa parte ya esta hecha), lo que sigue despues es donde me complica, cuando quiero hacer click en otro div este debe hacer focus, pero el anterior debe desactivar el focus. He intentando de varias maneras pero no hayo con que logica hacerlo. espero me puedan ayudar. Gracias. En el siguiente enlace pueden ver el ejercicio: https://stackblitz.com/edit/tarjeta-focus?file=components%2FTarjeta.jsx

este es el codigo que llevo hasta el momento:

function Tarjeta({ id }) {
  let cambio = id => {
    let x = document.querySelectorAll("div.tarjeta");
    for (let i = 0; i < x.length; i++) {
      if (x[i].classList.contains("tarjeta")) {
        x[id - 1].classList.add("focus");
        break;
      } else if (x[i].classList.contains("tarjeta focus")) {
        x[id - 1].classList.remove("focus");
      }
    }
  };
  return (
    <div className="tarjeta" onClick={() => cambio(id)}>
      hola
    </div>
  );
}
export default Tarjeta;
1
  • El código va aquí por favor, lee Cómo preguntar
    – user128299
    Commented el 27 jun. 2020 a las 19:48

1 respuesta 1

0

es bueno que tomes ventaja del state de react para renderizar las tarjetas de forma dinamica. Hice unos cambios en el codigo que tienes en stackblitz.

Esta es la modificacion del archivo index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Tarjeta from './components/Tarjeta'

const idTarjetas = [1, 2, 3, 4 , 5];

class App extends Component {
  state = {
    tarjetaSeleccionada: 0
  }

  cambio = id => {
    this.setState({
      tarjetaSeleccionada: id
   });
  };

  render() {
    return(
      <div>
        {idTarjetas.map(id => (
          <Tarjeta
            className={`tarjeta ${this.state.tarjetaSeleccionada === id ? 'focus' : ''}`}
            key={id}
            id={id}
            onClick={() => this.cambio(id)} />
        ))}
       </div>
    )
  }
}

render(<App />, document.getElementById('root'));

y este es el de Tarjeta.js

import React from "react";

function Tarjeta({ id, onClick, className }) {

return (
    <div className={className} onClick={onClick}>
      hola
    </div>
  );
}
export default Tarjeta;

Las modificaciones que hice fueron:

  1. Cambiar de functional component a class component
  2. crear una array (idTarjetas) para iterar sobre el en el render y poder generar las 5 tarjetas sin necesidad de escribirla una por una.
  3. usar el estado de react
  4. crear un metodo llamado cambio para hacer un setState en la variable de estado 'tarjetaSeleccionada'para saber que id se selecciono.
  5. en el return pasarle por props al componente Tarjeta la funcion cambio y el nombre de la clase que me va a agregar la clase focus dependiendo si el id clickeado es igual al id de la tarjeta.
  6. Como pudiste notar el componente Tarjeta solo me esta retornado jsx mientra el indez esta manejando la logica.

Si depronto hay algo no muy claro preguntame

3
  • Para qué el cambio de función a clase? Commented el 28 jun. 2020 a las 7:13
  • Basicamente para hacer uso del state. Se podria usar hooks para no hacer ese cambio pero teniendo en cuenta que Carlos esta iniciando con este framework , seria bueno que inicialmente lo hiciera de esta forma Commented el 28 jun. 2020 a las 17:00
  • 1
    No creo, si ya está con un componente funcional y tiene ya más documentación en ese sentido forzar la respuesta a un componente de clase que hace lo mismo pero con más complejidad, no parece ventajoso. Commented el 28 jun. 2020 a las 19:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.