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.
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;