0

Есть компонент Material-UI Stepper. В первый Step вставлен компонент, внутри которого Select. При выборе значения в Select и переходе на следующий шаг, элементы из первого шага удаляются из DOM полностью. Если я хочу вернуться в предыдущий шаг, то в компоненте Select'a хранится предыдущее выбранное значение, но оно визуально не отображается в самом поле, т.е поле остается пустым. Нужно что-то придумать либо с рефами, чтобы компонент не удалялся из дерева полностью, либо что-то еще.

Код компонента с Select:

<FormControl variant="outlined" >
        <InputLabel id="demo-customized-select-label">
            Специалист
        </InputLabel>
        <Select
            className={classes.select}
            labelId="demo-customized-select-label"
            value={props.selectedMaster?.name}
            onChange={handleChange}
            input={<BootstrapInput/>}
        >
            <MenuItem value={JSON.stringify(null)}>
                <Typography>
                   Все
                </Typography>
            </MenuItem>
            {props.masterList.map(masterData => {
                return (
                    <MenuItem key={masterData.id} value={JSON.stringify(masterData)}>
                        <Typography>
                            {masterData.name}
                        </Typography>
                    </MenuItem>
                )
            })}
        </Select>
    </FormControl>
5
  • что-то мне подсказывает, что ни Material-UI ни Select тут не причём. Как я понял, у вас теряется состояние при смене компонента? на чём компоненты(класс/ф-я) ? почему бы просто не прятать их hidden атрибутом?
    – qwabra
    13 мар 2020 в 8:31
  • @qwabra их убирает из дерева полностью компонент Stepper, когда мы переходим на следующий шаг. В принципе, решение логичное если нам не нужно возвращаться назад, но мне здесь это мешает. Все на функциональных компонентах. В том то и дело, что состояние не теряется, т.е оно также пробрасывается в компонент Select, но вместо того чтобы отображать значение в поле ввода, там пустое поле
    – Enkei
    13 мар 2020 в 8:45
  • мм, я вас не понимаю. компонент Stepper это библиотечный компонент? что за библиотека?
    – qwabra
    13 мар 2020 в 8:51
  • @qwabra, material-ui.com/components/steppers/#stepper
    – Enkei
    13 мар 2020 в 8:54
  • укажите это в вопросе
    – qwabra
    13 мар 2020 в 8:56

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.