Реактивная матрица с полями ввода

На чтение 4 мин Опубликовано 10.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Визуальные стили
Альтернативный вариант с SVG

Вопрос или проблема

В настоящее время я пытаюсь создать компонент React, принимающий в качестве входных данных количество строк и столбцов. Он должен возвращать (математическую) матрицу с полями ввода размером rows*cols.

<div className={`flex flex-row items-center`}>
  <table>
    <tbody>
    {Array.from({length: parsedVectorObject.cols}).map((_, i) => (
      <tr key={i}>
        {Array.from({length: parsedVectorObject.rows}).map((_, j) => (
          <td key={j}>
            <Input id={`x_${i}_${j}`} className={`w-12 mx-0.5`}/>
          </td>
        ))}
        </tr>
    ))}
    </tbody>
  </table>
</div>

Это мой текущий вариант, но мне все еще не хватает скобок вокруг таблицы, чтобы она выглядела как матрица.

Кто-нибудь знает, как это сделать?

Я пытался создать SVG, но как файл, так и создание пути кажутся довольно сложными.

Спасибо заранее.

Во-первых, вы должны установить высоту div, получив высоту таблицы.
А затем правильно изменить ширину в приведенном ниже коде w-[0.85em]

    <div className={`flex justify-center items-center h-32`}>
      <div className="w-[0.85em] h-full">
        <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="3 0 106 186"><path d="M85 0 A61 101 0 0 0 85 186 L75 186 A75 101 0 0 1 75 0"></path></svg>
      </div>
      <table>
        <tbody>
          {Array.from({ length: 5 }).map((_, i) => (
            <tr key={i}>
              {Array.from({ length: 3 }).map((_, j) => (
                <td key={j}>
                  <input id={`x_${i}_${j}`} className={`w-12 mx-0.5`} />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <div className="w-[0.85em] h-full">
        <svg width="100%" height="100%" preserveAspectRatio="none" viewBox="3 0 106 186"><path d="M24 0 A61 101 0 0 1 24 186 L34 186 A75 101 0 0 0 34 0"></path></svg>
      </div>
    </div>

Прилагаю изображение ниже.

Я думаю, что есть другое решение, давайте подумаем об этом.

Ответ или решение

Создание компонента матрицы с полями ввода в React может быть выполнено с использованием table, tr и td для представления структуры матрицы. Вы правы в том, что необходимо правильно настроить стили, чтобы матрица выглядела аккуратно. Давайте рассмотрим, как можно создать такой компонент, принимающий количество строк и столбцов.

Вот пример компонента, который позволяет создавать матрицу с полями ввода:

import React, { useState } from 'react';

const MatrixInput = ({ rows, cols }) => {
  const [matrix, setMatrix] = useState(Array.from({ length: rows }, () => Array(cols).fill('')));

  const handleChange = (value, rowIndex, colIndex) => {
    const newMatrix = matrix.map((row, rIdx) => 
      row.map((item, cIdx) => (rIdx === rowIndex && cIdx === colIndex ? value : item))
    );
    setMatrix(newMatrix);
  };

  return (
    <div className="flex justify-center items-center">
      <table className="border-collapse border">
        <tbody>
          {matrix.map((row, i) => (
            <tr key={i}>
              {row.map((value, j) => (
                <td key={j} className="border p-1">
                  <input
                    type="text"
                    value={value}
                    onChange={e => handleChange(e.target.value, i, j)}
                    className="w-12 text-center"
                    id={`input_${i}_${j}`}
                  />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

// Пример использования компонента
const App = () => {
  return (
    <div className="App">
      <h1>Введите значения матрицы</h1>
      <MatrixInput rows={3} cols={3} />
    </div>
  );
};

export default App;

В этом коде:

Компонент MatrixInput принимает rows и cols как пропсы и создает матрицу, состоящую из полей ввода.
Состояние matrix хранит текущее значение матрицы и инициализируется пустыми строками.
Функция handleChange обновляет состояние матрицы при изменении значения в поле ввода.
Внутри return мы создаем таблицу, где каждый элемент — это поле ввода.

Визуальные стили

Для того чтобы матрица выглядела аккуратно, вы можете добавить некоторые стили CSS:

table {
  border: 1px solid black;
  margin: 20px;
}
td {
  border: 1px solid black;
  width: 50px;
  text-align: center;
}
input {
  width: 100%;
  text-align: center;
}

Также вы можете использовать библиотеку стилей, такую как Tailwind CSS, для более гибкого и быстрым стилизации.

Альтернативный вариант с SVG

Для создания более сложного вида матрицы (например, в виде фигур или графиков), вы можете использовать SVG, как вы предложили, но это требует более сложного подхода и не всегда оправдано для простых матриц.

Таким образом, предложенное решение с использованием стандартных средств React и HTML дает простое и интуитивно понятное представление данных с минимальными усилиями.