Как мы можем настроить @material ui <ExpansionPanelSummary>expandIcon с помощью «Добавить и удалить значки»? - PullRequest
Новая
       9

Как мы можем настроить @material ui <ExpansionPanelSummary>expandIcon с помощью «Добавить и удалить значки»?

0 голосов
/ 16 февраля 2019

Я очень плохо знаком с ReactJS и @Material UI, и я пробовал разные способы тренировки, но пока не повезло.Может кто-нибудь, пожалуйста, подскажите, как я могу переопределить ExpandLess и ExpandMore значки с Add и Remove значками expandIcon.Вот код https://stackblitz.com/edit/react-d2xrnq. И я также заметил компонент @Material UI <ExpansionPanel>, использующий атрибут defaultExpanded для расширения всех панелей расширения по умолчанию.Итак, есть ли способ свернуть все расширенные панели расширения одним щелчком мыши?

Большое спасибо заранее за ваше время.

1 Ответ

0 голосов
/ 17 февраля 2019
  1. Использование разных значков - это всего лишь случай их импорта и использования вместо ExpandMoreIcon.Кроме того, мы отслеживаем состояние каждой отдельной панели (см. Пункт 2. ниже) и используем троичный, чтобы решить, какой значок отображать в зависимости от этого состояния. 
  <ExpansionPanelSummary
    expandIcon={
      this.state.expanded[statIndex]
      ? <Remove onClick={this.handleToggleOne(statIndex)} />
      : <Add onClick={this.handleToggleOne(statIndex)} />
    }
  >
    // panel contents
  </ExpansionPanelSummary>
Мы отслеживаем отдельные состояния панели в массиве expanded в состоянии, и мы также отслеживаем «групповой» переключатель через expandAll логическое состояние.expandAll по умолчанию имеет значение false, а массив expanded инициализируется всеми ложными значениями (столько, сколько имеется панелей) при загрузке панелей.

Каждая сворачиваемая панель expanded prop установлен в соответствующее значение expanded массива в состоянии.Это определяет состояние панели (свернуто, если false, развернуто, если true).

Мы настроили два обработчика: handleToggleOne каррируется с индексом панели и прикрепляется к значку раскрытия / свертывания для этой панели.,Он индивидуально устанавливает состояние панели в соответствии с указанным индексом. 

  handleToggleOne = (index) => () => {
    const { expanded } = this.state
    expanded[index] = !expanded[index]
    this.setState({ expanded })
  }

handleToggleAll используется для одновременного открытия или закрытия всех панелей.Мы отслеживаем и переключаем значение expandAll в состоянии и устанавливаем для каждого элемента в массиве expanded это значение.Затем обработчик присоединяется к глобальному 'Toggle All' Button. 

  handleToggleAll = () => {
    this.setState(state => ({ expandAll: !state.expandAll, expanded: state.expanded.map(e => !state.expandAll) }))
  }

. Вы можете найти рабочую ветвь вашего кода здесь: https://react -wd5uxp.stackblitz.io

(ссылка на редактор кода: https://stackblitz.com/edit/react-wd5uxp)

...