Как управлять динамически создаваемыми компонентами с помощью Material UI? - PullRequest
Новая
       5

Как управлять динамически создаваемыми компонентами с помощью Material UI?

0 голосов
/ 13 февраля 2020

В моем проекте, над которым я работаю, я пытаюсь управлять динамически созданными компонентами пользовательского интерфейса материалов. Например, я зацикливаю и помещаю множество компонентов в таблицу материалов. 

  for (let i = 0; i < daysBetweenDates + 1; i++) {
        let startDateCopy = startDate;
        tableData.push([
            <div className={classes.displayFlex}>
                <IconButton size="small">
                    <ClearIcon />
                </IconButton>
                <IconButton size="small">
                    <FileCopyIcon />
                </IconButton>
            </div>,
            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <KeyboardDatePicker
                    disableToolbar
                    variant="inline"
                    size="small"
                    format="MM/dd/yyyy"
                    margin="normal"
                    value={startDateCopy.setDate(startDateCopy.getDate() + 1)}
                    onChange={handleDateChange}
                    KeyboardButtonProps={{
                        'aria-label': 'change date',
                    }}
                />
            </MuiPickersUtilsProvider>,
            <TextField  size="small" variant="outlined" />, //shift start
            <TextField size="small" variant="outlined" />, //shift length
            <Typography>--MT</Typography>, //autocalculated shift end time
            <TextField size="small" variant="outlined" />,
            <TextField size="small" variant="outlined" />,
            <Typography>--MT</Typography>,
            <Typography>Salt Lake City</Typography>,
            <Typography>English</Typography>,

        ]);

Я должен манипулировать этими полями различными способами, например, если они нажимают на значок «Копировать файл», мне нужно заново создать строку и добавить это к столу. Если они вводят времена в первые два поля TextFields (начало и длина смещения), мне нужно автоматически рассчитать их время окончания и изменить первую типографику на это время окончания. Сначала я попытался удержать одну переменную состояния startTime, но затем она изменила все строки одновременно. Я думал о том, чтобы хранить ряды данных о состоянии, но это похоже на то, чтобы держать состояние и управлять им. Или лучше дать им идентификаторы, отслеживать и манипулировать ими таким образом.

Я использую React, Material UI, TypeScript. Спасибо!

Редактировать: Вот песочница с кодом, пришлось удалить стили, но вы можете увидеть, как я заполняю данные и как они будут использоваться. https://codesandbox.io/embed/elastic-blackwell-1r1jj?fontsize=14&hidenavigation=1&theme=dark

...