如何使用添加和删除图标自定义@material <ExpansionPanelSummary> expandIcon？
如何使用添加和删除图标自定义@material <ExpansionPanelSummary> expandIcon？
提问于 2019-02-15 23:38:30
我对ReactJS和@Material UI非常陌生&我尝试了不同的锻炼方法，但还没有运气。请有人指导我如何用ExpandLess和Remove图标来覆盖expandIcon和expandIcon图标。这是代码https://stackblitz.com/edit/react-d2xrnq。我还注意到@Material <ExpansionPanel>组件在默认情况下使用defaultExpanded属性展开所有展开面板。那么，是否有任何方法可以通过一次点击就可以将所有扩展的扩展面板崩溃？
谢谢你提前给我时间。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-16 13:05:49
- 使用不同的图标只是导入它们并使用它们代替
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则折叠，如果为真则展开)。
我们设置了两个处理程序：handleToggleOne与面板的索引一起运行，并附加到该面板的展开/折叠图标。它将面板的状态单独设置为指定的索引。
handleToggleOne = (index) => () => {
const { expanded } = this.state
expanded[index] = !expanded[index]
this.setState({ expanded })
}handleToggleAll用于同时切换所有面板打开或关闭。我们跟踪并切换状态下的expandAll值，并将expanded数组中的每个元素设置为该值。然后将处理程序附加到全局“Toggle”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)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54720935
复制相关文章
相似问题
ContentDispositionHeaderValue.FileName与asp.net内核中的IFormFile.FileName
==与===的区别
:+与&:+的区别
与的区别
<>与!=的区别
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
