select React 应用中不同列中的单元格

Question

最近在用react js做一款解谜游戏。我想 select 每列一个单元格。但不幸的是，我没有那样做。代码示例是 here。如果你能帮助我，我将不胜感激。

Answer 1

根据您的要求，您需要保存选中的相关列和行。

你可以在下面看到我的代码，我已经将相关的列和行存储到检查状态中，之后只需在 List 组件上稍微调整一下条件即可显示 bg-danger class.此外，我删除了 div 组件上的 onClick 函数，该组件是 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) && index === check[id] ? "bg-danger" : ""
              }`}
              onClick={() => handleCardClick(id, index)}
            >
              <h3>{number}</h3>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default List;

select React 应用中不同列中的单元格

select cell in different column in react app

javascript

ecmascript-6

reactjs