我们如何自定义@material ui< ExpansionPanelSummary>用Add&删除图标? [英] How can we customize @material ui <ExpansionPanelSummary> expandIcon with Add & Remove Icons?

问题描述

我对ReactJS和@Material UI&我尝试了不同的锻炼方式，但还没有走运.有人可以指导我如何用expandIcon的Add和Remove图标覆盖ExpandLess和ExpandMore图标.这是代码 https://stackblitz.com/edit/react-d2xrnq .而且我还注意到@Material UI <ExpansionPanel>组件使用defaultExpanded属性来默认扩展所有扩展面板.因此，有什么方法可以通过单击折叠所有扩展的Expansion Panel吗?

I am very new to ReactJS and @Material UI & I tried different ways to workout but no luck yet. Can someone please guide me how I can override ExpandLess and ExpandMore icons with Add and Remove icons of expandIcon. Here is code https://stackblitz.com/edit/react-d2xrnq. And I also notice @Material UI <ExpansionPanel> component using defaultExpanded attribute to expand all Expansion Panel's by default. So, is there any way to collapse all expanded Expansion Panel's with single click?

非常感谢您抽出宝贵的时间.

Thank you so much in advance for your time.

推荐答案

1. 使用不同的图标只是导入和使用它们代替ExpandMoreIcon的一种情况.此外，我们跟踪每个面板的状态(请参见下面的第2点)，并使用三元对象来决定根据该状态显示哪个图标.

1. Using different icons is simply a case of importing them and using them in place of ExpandMoreIcon. In addition, we track every single panel's state (see point 2. below) and use a ternary to decide which icon to display depending on that state.

  <ExpansionPanelSummary
    expandIcon={
      this.state.expanded[statIndex]
      ? <Remove onClick={this.handleToggleOne(statIndex)} />
      : <Add onClick={this.handleToggleOne(statIndex)} />
    }
  >
    // panel contents
  </ExpansionPanelSummary>

1. 我们跟踪状态为expanded的数组中各个面板的状态，并且跟踪状态为expandAll布尔值的分组"切换. 默认情况下，expandAll设置为false，并且在加载面板时，将expanded数组初始化为所有false值(与面板一样多).

1. We keep track of individual panel states in the expanded array in state, and we also keep track off a 'grouped' toggle through expandAll boolean in state. expandAll is set to false by default, and the expanded array is initialized to all false values (as many as there are panels) when the panels are loaded.

每个可折叠面板的expanded属性在状态下均设置为相应的expanded数组值.这确定了面板的状态(如果为false，则折叠，如果为true，则展开).

Each collapsible panel's expanded prop is set to the corresponding expanded array value in state. This determines the state of the panel (collapsed if false, expanded if true).

我们设置了两个处理程序: handleToggleOne使用面板的索引进行管理，并附加到该面板的展开/折叠图标.它将面板的状态分别设置为指定的索引.

We set up two handlers: handleToggleOne is curried with the panel's index, and attached to the expand/collapse icon for that panel. It individually sets the state of the panel at the stated index.

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

handleToggleAll用于立即切换所有面板的打开或关闭状态.我们跟踪并切换状态中的expandAll值，并将expanded数组中的每个元素设置为该值.然后将处理程序附加到全局全部切换" Button.

handleToggleAll is used to toggle all panels open or closed at once. We keep track and toggle the expandAll value in state, and set each element in the expanded array to that value. The handler is then attached to a global 'Toggle All' Button.

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

您可以在此处找到代码的工作分支: https://react-wd5uxp.stackblitz.io

You can find a working fork of your code here: https://react-wd5uxp.stackblitz.io

(代码编辑器链接: https://stackblitz.com/edit/react-wd5uxp)

这篇关于我们如何自定义@material ui< ExpansionPanelSummary>用Add&删除图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！