• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

59
Views
seleccione la celda en una columna diferente en la aplicación de reacción

Recientemente estoy trabajando en un juego de rompecabezas con react js. Quiero seleccionar una celda en cada columna. pero desafortunadamente, no hice eso. el ejemplo de código está aquí . Estaría muy agradecido si me pueden ayudar con eso.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Con su requisito, debe guardar la columna y la fila seleccionadas que están relacionadas.

Puede ver mi código a continuación, guardé la columna y la fila relacionadas en el estado de verificación, después de eso, solo modifique una pequeña condición en el componente List para mostrar la clase bg-danger . Además, eliminé la función onClick en el componente div , un padre del componente List , porque creo que es inútil hacer varias llamadas a funciones a la vez para la misma acción onClick

Aplicación.js

 import "./styles.css"; import List from "./List"; import { useState, useRef } from "react"; export default function App() { const [check, setCheck] = useState({}); const [columnId, setColumnId] = useState(null); const refColumnId = useRef(columnId) refColumnId.current = columnId; const data = [ { id: 1, listOfNumbers: [1, 2, 3, 4, 5, 6] }, { id: 2, listOfNumbers: [1, 2, 3, 4, 5, 6] }, { id: 3, listOfNumbers: [1, 2, 3, 4, 5, 6] } ]; const handleIndex = (column, row) => { setCheck({...check, [column]: row}) }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <div className="row"> {data.map((data, index) => { return ( <div className="col-md-4"> <List columnId={columnId} key={data.id} data={data.listOfNumbers} getIndex={handleIndex} check={check} id={data.id} /> ; </div> ); })} </div> </div> ); }

lista.js

 const List = ({ data, getIndex, check, id, columnId }) => { const handleCardClick = (column, row) => { console.log("columnId : ", columnId); console.log("id : ", check); getIndex(column, row); }; return ( <div className="d-flex flex-column"> {data.map((number, index) => { return ( <div className="card"> <div className={`card-body ${ check.hasOwnProperty(id) && index === check[id] ? "bg-danger" : "" }`} onClick={() => handleCardClick(id, index)} > <h3>{number}</h3> </div> </div> ); })} </div> ); }; export default List;
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error