Блог

Я пытаюсь сделать следующее в React:

1. Пользователь вводит строки и столбцы
2. В react создается сетка из пустых входных данных, отображаемая в виде сетки с правильными размерами.

Пока у меня есть следующее. Здесь я предполагаю, что для краткости строк и столбцов, которые пользователь вводит, равно 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;
  

Теперь это просто дает мне вывод, который выглядит следующим образом:

Может кто-нибудь, пожалуйста, дать мне несколько идей относительно того, как можно превратить вышеупомянутое в сетку 3×3? Я хочу, чтобы в конечном итоге она корректировалась на основе значений строк и столбцов, которые предоставляет пользователь.

В настоящее время вы создаете базовый массив из 9 элементов. Наиболее логичным способом разбить ее на строки и столбцы, вероятно, было бы создать 3 массива, содержащих по 3 входных элемента в каждом, затем разделить каждую группу из 3 входных данных в чем-то вроде <div> , чтобы они отображались в отдельных строках.

Одним из решений является что-то вроде

 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>;
  });
  

По мере уточнения решения, возможно, будет лучше извлечь количество строк / столбцов в их собственные переменные.

Это должно помочь вам разобраться в основах проблемы. Оттуда может быть удобнее отображать их в виде ячеек в таблице и т.д.

Не стесняйтесь взглянуть на макеты сетки, которые могут соответствовать тому, что вы хотите.