[英]Making a matrix of inputs from user defined inputs
I am trying to do the following in React:我正在尝试在 React 中执行以下操作:
So far I have the following.到目前为止,我有以下内容。 Here I am assuming that the rows and columns that the user has input is 3 for both for brevity:在这里,为了简洁起见,我假设用户输入的行和列都是 3:
import React from "react";
import "./App.css";
function App() {
// create a 3x3 matrix with some blank inputs as values values
const matrix = Array.apply(null, Array(9)).map(function (x, i) {
return <input></input>;
});
return <div className="App">{matrix}</div>;
}
export default App;
Now this just gives me output that looks as follows:现在这只是给了我如下所示的输出:
Could someone please give me some ideas as to how can turn the above into a 3x3 grid?有人可以给我一些关于如何将上述内容变成 3x3 网格的想法吗? I want it to eventually adjust based on what row and column values that the user provides.我希望它最终根据用户提供的行和列值进行调整。
Currently you are creating a basic array of 9 elements.目前您正在创建一个包含 9 个元素的基本数组。 The most logical way to break it into rows and columns would likely be to create 3 arrays containing 3 input elements each, then separating each group of 3 inputs within something like a <div>
so they are rendered on separate lines.将其分解为行和列的最合乎逻辑的方法可能是创建 3 个数组,每个数组包含 3 个输入元素,然后将每组 3 个输入分隔在诸如<div>
之类的东西中,以便它们在单独的行上呈现。
One solution is something like一种解决方案是这样的
const matrix = Array.apply(null, Array(3))
.map(function (x, i) {
const col = Array.apply(null, Array(3))
.map(function (y, j) {
return <input></input>
});
return <div>{col}</div>;
});
As you refine the solution, it may be best to extract the row/column counts to their own variables.在优化解决方案时,最好将行/列计数提取到它们自己的变量中。
That should get you through the basics of the problem.这应该可以让您了解问题的基础知识。 From there, it may be cleaner to render these as cells in a table, etc.从那里开始,将这些呈现为表格中的单元格等可能会更清晰。
Feel free to take a look at grid layouts which may be in line with what you want.随意查看可能符合您想要的网格布局。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.