映射到 div 网格-解网

问：

我正在尝试调整以下内容，以便 4x4 网格显示数字 1 到 n。每个 div 单元格都需要一个 onclick 处理程序。

function App() {
     
  
  return (
    <div style={{
      background: "",
      height: "400px",
      width: "400px",
      display: "flex",
      flexWrap: "wrap"
    }}>
      {new Array(16).fill(1).map(n =>{  return <div style={{
    height: "96px",
    width: "96px",
    backgroundColor: "transparent",
    border: "solid 2px white"
  }}>{n}</div>})}
    </div>
  );
}

export default App;

如何获得每个单元格上的数字 1...16？我在上面的 div 中尝试了 {n} - 没有帮助。如何在每个div上添加点击事件处理程序并获取其中的数字？

ReactJS 映射闭包

function App() {
     
  
  return (
    <div style={{
      background: "",
      height: "400px",
      width: "400px",
      display: "flex",
      flexWrap: "wrap"
    }}>
      // Additional map to convert Array fill to the index values instead
      {new Array(16).fill().map((_, i) => i+1).map(n =>{  return <div style={{
    height: "96px",
    width: "96px",
    backgroundColor: "transparent",
    cursor: "pointer", // Showing mouse correctly for click action
    border: "solid 2px white",
  }} onClick={() => console.log(n)}>{n}</div>})} // Added a simple onClick function
    </div>
  );
}

export default App;

这只是一个粗略的代码，我相信这段代码将成为更大的 react 应用程序的一部分，并且应该使用组件来更好地组织事物。

映射到 div 网格

Map to a div grid

评论

评论