如何实现React下拉列表展开/收起时箭头图标的状态切换

嘿，这个需求很容易实现！咱们直接用你已经定义好的isExpanded状态就能搞定——核心思路就是根据列表展开/收起的状态，动态切换Material Icons的图标名称。

先提个小细节：React元素里要使用className而非class，原代码里的<span>标签属性得先修正过来。然后把固定的arrow_drop_down图标改成根据isExpanded判断的动态值：列表展开时显示arrow_drop_up，收起时显示arrow_drop_down。

修改后的完整代码如下：

export default function FilterStatusCode() { 
  const [values, setValues] = React.useState([]); 
  const [isExpanded, setIsExpanded] = React.useState(false); // 若未单独导入useState，建议加上React.前缀避免报错
  const toggleExpand = () => { 
    setIsExpanded(!isExpanded); 
  }; 
  return <> 
    <div className="item-toggle-statuscode" onClick={toggleExpand}> 
      <h6>Status Code</h6> 
      {/* 核心：根据isExpanded状态动态切换箭头图标 */}
      <span className="material-icons">
        {isExpanded ? 'arrow_drop_up' : 'arrow_drop_down'}
      </span> 
    </div> 
    { isExpanded && <div> 
      <TagInput inputProps={{ placeholder: 'Add status code...' }} values={values} onChange={(values) => { setValues(values)}}> 
      </TagInput> 
    </div> } 
  </>; 
}

关键修改说明： #

• 用三元表达式{isExpanded ? 'arrow_drop_up' : 'arrow_drop_down'}替换固定图标文本，实现状态切换时的箭头翻转
• 修正了React组件中属性名class为规范的className
• 额外补充：如果组件没有单独导入useState，写成React.useState能避免编译报错

这样点击切换列表状态时，箭头就会跟着同步变化啦！

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