在反应应用程序的不同列中选择单元格

Posted 2023-02-22

【中文标题】在反应应用程序的不同列中选择单元格

【英文标题】：select cell in different column in react app

【发布时间】：2022-01-10 11:06:20

【问题描述】：

最近我正在使用 react js 开发一款益智游戏。我想在每一列中选择一个单元格。但不幸的是，我没有那样做。代码示例是here。如果您能帮助我，我将不胜感激。

【问题讨论】：

你想在每一列中选择一个行ID吗？

不，我只想在每一列中选择一个单元格

如果我在第 2 列中选择“2”，那么第 1 列和第 3 列中的“2”会被选中吗？

不，不应该选择

意思是只选了一个？

【参考方案1】：

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

您可以在下面看到我的代码，我已将相关的列和行存储到检查状态中，然后只需在 List 组件上调整一点条件以显示 bg-danger 类。此外，我删除了 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;