Панель расширения Material-UI не подчиняется контролируемому расширению - PullRequest
Новая
       15

Панель расширения Material-UI не подчиняется контролируемому расширению

0 голосов
/ 29 мая 2019

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

Мне также нужно визуализировать jsx с помощью цикла.Этот цикл, кажется, вызывает проблему, потому что он работает без цикла.

2-й и 3-й ящики работают так, как они должны здесь.

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

function setAttributes(i) {
   return [
     { defaultExpanded: true },
     { expanded: expanded === `panel2` },
     { expanded: expanded === `panel3` }
   ]
  }

return (
<div className={`${classes.root} accordion`}>
  {Object.values(props.drawers).map((drawer, i) => {
    return (
      <ExpansionPanel
        key={i} 
        //set attributes here
        {...setAttributes(i)[i]}
        onChange={handleChange(`panel${i + 1}`)}
        className="expansion-panel"
      >
        <ExpansionPanelSummary
          className="expansion-panel-inner"
          expandIcon={<ExpandMoreIcon />}
          aria-controls={`panel${i + 1}bh-content`}
          id={`panel${i + 1}bh-header`}
        >
          <Typography className={`${classes.heading} panel-heading`}>
            {' '}
            {drawer.heading}
          </Typography>
          <Typography className={classes.secondaryHeading} />
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>{drawer.text}</Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    )
  })}
</div>

)

Я пытался посмотреть, какие реквизиты прикреплены после рендера, но это не супер ясно;это не так просто, как поиск дополнительного класса.Мне неясно, добавляются ли соответствующие реквизиты на каждую панель.Я также попытался сделать первый объект внутри setAttributes { defaultExpanded: true, expanded: expanded === "panel1" },, но это просто отключает расширение по умолчанию.

A demo показывает проблему.

Я хочу первыйпанель открыта при загрузке, затем только одна панель, в зависимости от того, по которой щелкают, должна быть открыта, и только эта.

1 Ответ

1 голос
/ 29 мая 2019

Если я понимаю вашу проблему, вы можете просто установить значение по умолчанию. 

const [expanded, setExpanded] = React.useState("panel1");

И если вы хотите сделать так, чтобы вы не могли свернуть панель, щелкнув ее снова: 

const handleChange = panel => (event, isExpanded) => {
    setExpanded(panel);
};
...