我是很新的ReactJS，并@Material UI与我尝试不同的方式来锻炼，但没有运气呢。有人可以指导我如何使用expandIcon和图标覆盖ExpandLess和ExpandMore图标。这是代码https://stackblitz.com/edit/react-d2xrnq。而且我还注意到@Material UI组件默认使用属性来展开所有扩展面板。那么，有没有办法通过单击折叠所有展开的扩展面板？AddRemove<ExpansionPanel>defaultExpanded
非常感谢您抽出宝贵时间。
ExpandMoreIcon. 此外，我们跟踪每个面板的状态（请参阅下面的第 2 点）并使用三元组来决定根据该状态显示哪个图标。 <ExpansionPanelSummary
expandIcon={
this.state.expanded[statIndex]
? <Remove onClick={this.handleToggleOne(statIndex)} />
: <Add onClick={this.handleToggleOne(statIndex)} />
}
>
// panel contents
</ExpansionPanelSummary>
expanded在 state 中跟踪数组中的各个面板状态，并且我们还通过expandAll状态中的布尔值跟踪“分组”切换。expandAll默认情况下设置为 false，并且在expanded加载面板时将数组初始化为所有 false 值（与面板一样多）。每个可折叠面板的expanded道具都设置为expandedstate 中的相应数组值。这决定了面板的状态（如果为假则折叠，如果为真则展开）。
我们设置了两个处理程序：handleToggleOne与面板的索引一起使用，并附加到该面板的展开/折叠图标。它单独将面板的状态设置为指定的索引。
handleToggleOne = (index) => () => {
const { expanded } = this.state
expanded[index] = !expanded[index]
this.setState({ expanded })
}
handleToggleAll用于同时打开或关闭所有面板。我们跟踪并切换expandAllstate 中的值，并将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）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句