Question

我正致力于使用线性代数技术分析矩阵（https://en.wikipedia.org/wiki/Matrix_(mathematics)）的应用程序。我拥有为进行分析/计算而创建的所有函数，但是我无法确定如何在反应中设置动态大小的数字输入形式。

我对如何实施它有一些想法（两者都没有像我希望的那样工作）。一种是使用名为Matrix的容器组件，它实例化一组子Entry组件，用于实际获取输入。唯一的问题是如何最好地迭代这些条目并获得它们各自的值。过去，弄清楚如何最好地展示它们也证明是具有挑战性的。

在获得正确的大小矩阵（使用商店状态中的行和列值）之后，Array.prototype.map似乎是一种可靠的方式，但组件组织难以捉摸。行和列当前从商店获得，然后作为props传递给Matrix组件。

render() {
let arr = [];
for (let i = 0; i < this.props.rows; i++) {
  arr[i] = [];
  for (let j = 0; j < this.props.cols; j++) {
    arr[i][j] = `${i},${j}`;
  }
}

var entries = arr.map((rows, i) => {
  return rows.map((cols, j) => {
    return <Entry id={`${i},${j}`} value={0}/>
  });
});
console.log(arr);
console.log(entries);

return (
  <div>
    {entries}
  </div>
);`

最终目标是创建一个数组的复合数组，其中包含数字，然后可以通过已经测试和创建的reducer将其添加到状态。矩阵的形式为：[[1,0]，[0,1]]，用于2x2矩阵。所以最终它可能会在页面上看起来和格式化为：

`<Entry id={"0,0"} /> <Entry id={"0,1"} />
 <Entry id={"1,0"} /> <Entry id={"1,1"} />`

然后可以将其翻译成上述样式矩阵。另外，要清楚，每个条目都是自己的输入标记（从技术上讲，使用来自react-bootstrap的FormControl）。

Answer 1

我想我明白，有几种方法可以做到，但我会按你的方式去做

render() {
  let arr = [];
  for (let i = 0; i < this.props.rows; i++) {
    arr[i] = [];
    for (let j = 0; j < this.props.cols; j++) {
      arr[i][j] = `${i},${j}`;
    }
  }

  console.log(arr);
  console.log(entries);

  return (
    <div>
      {arr.map((rows, i) =>
        <FormGroup>
          {rows.map((cols, j) =>
            <Entry id={`${i},${j}`} value={0}/>
          )}
        </FormGroup>
      )}
    </div>
  );
}

在这里你会得到

<FormGroup>
  <Entry>
  <Entry>
</FormGroup>
<FormGroup>
  <Entry>
  <Entry>
</FormGroup>

对于你给出的矩阵作为例子请注意，我删除了大括号和返回并使用了简写

如何使用React / Redux为输入数组创建动态大小的表单？

1 个答案: