Question

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

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

Answer 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属性在状态下均设置为相应的expanded数组值。这确定了面板的状态（如果为false，则折叠，如果为true，则展开）。

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

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

handleToggleAll用于立即切换所有面板的打开或关闭状态。我们跟踪并切换状态中的expandAll值，并将expanded数组中的每个元素设置为该值。然后将处理程序附加到全局“全部切换” 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）

我们如何使用添加和删除图标来自定义@material ui <expansionpanelsummary> expandIcon？

1 个答案: