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

Question

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

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

Answer 1

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

  <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 值（与面板一样多）。

每个可折叠面板的expanded 属性都设置为状态中对应的expanded 数组值。这决定了面板的状态（如果为假则折叠，如果为真则展开）。

我们设置了两个处理程序： 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）