Блог

Недавно я работаю над головоломкой с react js. Я хочу выбрать одну ячейку в каждом столбце. но, к сожалению, я этого не сделал. пример кода здесь. Я был бы очень признателен, если вы сможете мне в этом помочь.

В соответствии с вашим требованием вам необходимо сохранить выбранный столбец и строку, которые связаны.

Вы можете увидеть мой код ниже, я перевел связанный столбец и строку в состояние проверки, после чего просто немного изменил условие для List компонента, чтобы показать bg-danger класс. Кроме того, я удалил onClick функцию в div компоненте, являющемся родительским List компонентом компонента, потому что я думаю, что бесполезно выполнять несколько вызовов функций одновременно для одного и того же действия onClick

App.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>
  );
}
 

List.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) amp;amp; index === check[id] ? "bg-danger" : ""
              }`}
              onClick={() => handleCardClick(id, index)}
            >
              <h3>{number}</h3>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default List;