如何实现函数式组件（functional components）的互斥展开/收起状态及模态框触发的状态切换

Hey Dennis, 我明白你现在的困扰——用状态提升来实现这种互斥状态切换+模态框确认的逻辑，确实需要把几个状态串联起来处理，咱们一步步拆解来做：

核心思路：父组件统一管理状态 #

既然要求同一时间只能有一个地址组件展开，那所有地址的展开状态、模态框的触发状态都应该提升到它们的共同父组件来管理，这样父组件能全局控制每个子组件的状态，避免子组件各自维护状态导致的不同步问题。

我们需要在父组件中维护三个关键状态：

• expandedAddressId：记录当前展开的地址ID（初始值设为null，表示没有展开的组件）
• showConfirmModal：控制确认模态框的显示/隐藏
• targetAddressId：记录点击编辑按钮的目标地址ID，用于模态框确认后切换展开状态

具体实现步骤 #

1. 父组件状态定义 #

在父组件中用useState定义这几个状态：

import { useState } from 'react';

function AddressContainer() {
  // 当前展开的地址ID
  const [expandedAddressId, setExpandedAddressId] = useState(null);
  // 是否显示确认模态框
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  // 点击编辑的目标地址ID
  const [targetAddressId, setTargetAddressId] = useState(null);

  // 后续的处理函数写在这里...

  return (
    <div>
      {/* 三个地址组件 */}
      <AddressItem
        id="addr-1"
        isExpanded={expandedAddressId === "addr-1"}
        onEditClick={() => handleEditClick("addr-1")}
      />
      <AddressItem
        id="addr-2"
        isExpanded={expandedAddressId === "addr-2"}
        onEditClick={() => handleEditClick("addr-2")}
      />
      <AddressItem
        id="addr-3"
        isExpanded={expandedAddressId === "addr-3"}
        onEditClick={() => handleEditClick("addr-3")}
      />

      {/* 确认模态框 */}
      {showConfirmModal && (
        <ConfirmModal
          onConfirm={() => handleModalConfirm()}
          onCancel={() => setShowConfirmModal(false)}
        />
      )}
    </div>
  );
}

2. 处理编辑按钮点击事件 #

当用户点击某个地址的编辑按钮时，我们需要判断当前是否有已展开的地址，并做出对应处理：

const handleEditClick = (id) => {
  // 如果当前没有展开的地址，直接展开目标地址
  if (!expandedAddressId) {
    setExpandedAddressId(id);
    return;
  }

  // 如果点击的就是当前展开的地址，直接进入编辑（不需要弹窗）
  if (expandedAddressId === id) {
    // 这里可以直接触发编辑逻辑，比如打开编辑表单
    return;
  }

  // 如果当前有其他展开的地址，弹出确认模态框，记录目标地址ID
  setTargetAddressId(id);
  setShowConfirmModal(true);
};

3. 处理模态框的确认/取消逻辑 #

当用户在模态框中选择「放弃更改」或「继续编辑」时，更新对应的状态：

const handleModalConfirm = () => {
  // 放弃当前展开的地址，切换到目标地址
  setExpandedAddressId(targetAddressId);
  setShowConfirmModal(false);
  setTargetAddressId(null);
};

// 取消的话直接关闭模态框，状态不变
// 这个逻辑已经在模态框的onCancel中处理了：setShowConfirmModal(false)

4. 子组件（AddressItem）的实现 #

子组件只需要接收父组件传递的isExpanded和onEditClick props，根据isExpanded渲染展开/收起状态，点击编辑按钮时调用父组件的函数：

function AddressItem({ id, isExpanded, onEditClick }) {
  return (
    <div className="address-item">
      {/* 收起状态显示的内容 */}
      {!isExpanded && (
        <div>
          {/* 地址展示内容 */}
          <button onClick={onEditClick}>编辑</button>
        </div>
      )}

      {/* 展开状态显示的内容 */}
      {isExpanded && (
        <div>
          {/* 编辑表单内容 */}
          <button onClick={() => setExpandedAddressId(null)}>收起</button>
        </div>
      )}
    </div>
  );
}

为什么这样实现？ #

• 状态提升到父组件后，所有地址的展开状态都由父组件统一控制，天然保证了「同一时间只能展开一个」的互斥性；
• 模态框的状态和目标地址ID也由父组件管理，能准确在用户确认后切换展开状态，逻辑清晰且易维护；
• 子组件只需要关注自己的渲染逻辑，不需要维护状态，符合函数式组件的设计思想。

如果还有细节需要调整（比如编辑表单的内容、模态框的样式），可以基于这个核心逻辑进一步扩展~

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