Пользовательский интерфейс материалов Texboxes Динамически создаваемая форма Массив Отображение в нескольких столбцах ReactJs

Question

Я получаю список автомобилей из API, у меня есть следующий код для создания списка меток и текстовое поле для редактирования кода автомобиля.

  {!carQuery.loading &&
            carDefinitions?.map((car: ICarType, idx: number) =>
                <TextField
                    required
                    id={car.name}
                    label={car.name}
                    defaultValue={car.code}
                    name={car.name}
                    key={idx}
                    onChange={e => {
                        const code = carDefinitions.filter(x => x.name === e.target.name);
                        shortCut[0].code = e.target.value;
                    }}
                />)

Проблема, с которой я столкнулся, может быть решена 50 автомобилей, так что форма действительно длинная, любые идеи, как я мог бы сделать это проще, чем одна длинная форма, например, столбцы или нумерация страниц. Я не уверен, что лучше

interface ICarType
{
    name: string;
    code: string;
    isDiesel: boolean;
}

Answer 1

Использование Разбивка на страницы из Material-UI Lab, (подробнее Здесь )

Я создал PaginationComponent итерации по массиву объектов и разбивать их на страницы. Компонент использует два подпорки для работы

1. items - массив объектов, который вы хотите перебрать
2. itemsPerPage - количество элементов, отображаемых на странице

Примечание

В этом примере нумерации страниц я использовал компонент <TextField/> с опорами, которые вы указали в своем вопросе.

Также я изменил обработчик для onChange на компоненте <TextField/> для работы в песочнице.

Пожалуйста, адаптируйте код под свои нужды, это всего лишь MVP чтобы продемонстрировать, как работает нумерация страниц

Песочница здесь

const PaginationComponent = ({ items, itemsPerPage }) => {
  const [page, setPage] = useState(0);
  const handleChangePage = useCallback((e, v) => setPage(v - 1), []);

  return (
    <Grid container direction="column" justify="center" alignItems="stretch">
      <Grid item>
        {items
          .slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage)
          .map((car, idx) => (
            <TextField
              required
              fullWidth
              id={car.name}
              label={car.name}
              defaultValue={car.code}
              name={car.name}
              key={idx}
              onChange={e => console.log(e.target)}
            />
          ))}
      </Grid>
      <Grid item>
        <Pagination
          count={Math.ceil(items.length / itemsPerPage)}
          onChange={handleChangePage}
        />
      </Grid>
    </Grid>
  );
};