Material UI React ListItem自定义切换按钮失效问题求助

看起来你遇到的核心问题是自定义按钮没有随着ListItem的展开/收起状态自动更新样式/图标，这主要是因为你没有把展开状态和组件的state绑定，也没有根据状态动态切换按钮内容。我来一步步帮你解决：

问题根源 #

1. 你直接用checkOpenMenu()赋值给open属性，但这个函数如果没有触发组件重渲染，按钮就不会跟着变化；
2. rightIconButton是静态的，没有根据当前展开状态动态切换图标，所以点击后样式不会更新。

解决方案 #

第一步：把展开状态存入组件state #

首先，在你的组件里初始化状态，用来跟踪ListItem的展开情况（如果是多个列表项，建议用对象/数组存储每个项的状态）：

constructor(props) {
  super(props);
  // 单个列表项的情况
  this.state = {
    isMenuOpen: false
  };
  // 如果是多个列表项，用对象存储每个key的状态
  // this.state = { openMenus: {} };
  
  this.toggleMenu = this.toggleMenu.bind(this);
}

// 单个项的切换函数
toggleMenu() {
  this.setState(prevState => ({
    isMenuOpen: !prevState.isMenuOpen
  }));
}

// 多个项的切换函数（接收item key）
// toggleMenu(key) {
//   this.setState(prevState => ({
//     openMenus: {
//       ...prevState.openMenus,
//       [key]: !prevState.openMenus[key]
//     }
//   }));
// }

第二步：动态绑定按钮内容和状态 #

修改你的ListItem代码，让open属性绑定state，同时根据状态切换按钮图标：

单个列表项的情况

<ListItem
  style={{ height: 46 }}
  nestedListStyle={{ padding: 0 }}
  key={key}
  open={this.state.isMenuOpen} // 绑定state里的状态
  primaryTogglesNestedList={true}
  primaryText='test'
  onTouchTap={this.toggleMenu} // 绑定切换事件（触发state更新）
  rightIconButton={
    <IconButton>
      {/* 根据展开状态切换图标 */}
      <img 
        src={this.state.isMenuOpen 
          ? baseUrl + "/close.svg" 
          : baseUrl + "/open.svg"
        } 
        alt={this.state.isMenuOpen ? "收起" : "展开"}
      />
    </IconButton>
  }
/>

多个列表项的情况

<ListItem
  style={{ height: 46 }}
  nestedListStyle={{ padding: 0 }}
  key={key}
  open={this.state.openMenus[key] || false} // 对应单个项的状态
  primaryTogglesNestedList={true}
  primaryText='test'
  onTouchTap={() => this.toggleMenu(key)} // 传递当前项的key
  rightIconButton={
    <IconButton>
      <img 
        src={this.state.openMenus[key] 
          ? baseUrl + "/close.svg" 
          : baseUrl + "/open.svg"
        } 
        alt={this.state.openMenus[key] ? "收起" : "展开"}
      />
    </IconButton>
  }
/>

关于rightToggle的替代方案 #

如果你想用rightToggle属性，同样需要把它做成受控组件，绑定状态和切换事件：

<ListItem
  // 其他属性...
  open={this.state.isMenuOpen}
  rightToggle={
    <Toggle
      toggled={this.state.isMenuOpen}
      onToggle={this.toggleMenu}
      icon={<img src={baseUrl + "/open.svg"} alt="展开" />}
      toggledIcon={<img src={baseUrl + "/close.svg"} alt="收起" />}
    />
  }
/>

关键注意点 #

• 一定要用setState来更新展开状态，这样才会触发组件重渲染，按钮才会跟着变化；
• 如果是多个列表项，不要用单个state变量，否则所有项的状态会同步变化，要用对象/数组分别存储每个项的状态；
• 确保你的图标路径baseUrl + "/open.svg"是正确的，避免加载失败导致看不到变化。

内容的提问来源于stack exchange，提问作者Shyam Kumar