如何阻止IonAccordionGroup重渲染？输入时面板状态自动切换问题

安全阿岳

2026-6-28

问题原因与解决方案

核心问题

你把IonAccordionGroup的value硬编码成了固定值"first"，没有用状态变量跟踪当前展开的面板。当IonInput触发onIonInput更新Inputvalue时，组件会重渲染，此时IonAccordionGroup的value被重新设置为"first"，导致面板状态被强制重置回初始状态。

另外需要注意：当multiple={true}时，IonAccordionGroup的value应该是数组类型（支持同时展开多个面板），而非单个字符串，这也是引发异常的潜在因素。

修复步骤

用状态变量管理IonAccordionGroup的展开状态，初始值设为包含"first"的数组
绑定onIonChange事件，实时更新状态变量以同步面板的展开/关闭操作
将IonAccordionGroup的value绑定到这个状态变量

修正后的代码示例

import { useState } from 'react';
import { IonAccordionGroup, IonAccordion, IonInput } from '@ionic/react';

// 组件内部逻辑
const [activeAccordions, setActiveAccordions] = useState<string[]>(["first"]);
const [inputValue, setInputValue] = useState<string>("");

return (
  <IonAccordionGroup
    multiple={true}
    value={activeAccordions}
    onIonChange={(e) => setActiveAccordions(e.detail.value as string[])}
  >
    <IonAccordion value="first">
      {/* 第一个面板内容 */}
    </IonAccordion>

    <IonAccordion value="second">
      <IonInput
        label="输入框"
        value={inputValue}
        type="text"
        onIonInput={(e) => setInputValue(e.detail.value as string)}
      />
    </IonAccordion>
  </IonAccordionGroup>
);