如何在Storybook故事中设置isOpen为false并实现关闭触发逻辑？

要实现既能手动设置isOpen初始值（包括设为false），又能让onCloseModal触发时自动将isOpen切换为false，你需要在Story中引入React状态管理来维护弹窗的打开状态，具体修改如下：

1. 调整Story代码 #

替换原有的DefaultModal定义，使用render函数结合useState来管理状态：

import React, { useState } from 'react';
// 保留原有的其他导入代码

export const DefaultModal: Story = {
  render: (args) => {
    // 用传入的args.isOpen作为初始状态
    const [isOpen, setIsOpen] = useState(args.isOpen);
    
    return (
      <ItemModal
        {...args}
        isOpen={isOpen}
        // 触发关闭时更新状态为false
        onCloseModal={() => setIsOpen(false)}
      />
    );
  },
  args: {
    avatarUrl: 'https://placehold.co/100',
    isOpen: true, // 这里可直接修改为false，测试弹窗初始关闭状态
    hasFullImage: true,
  },
};

2. 修改说明 #

• 改用render函数而非直接使用静态args，让我们能在Story内部维护组件的动态状态
• useState(args.isOpen)会以你在args中设置的值作为弹窗初始状态，修改args.isOpen就能直接切换初始显示/隐藏效果
• 绑定onCloseModal为setIsOpen(false)，触发关闭操作时会自动更新状态，让弹窗关闭

这样修改后，你既可以自由控制弹窗的初始状态，也能保证关闭按钮的交互逻辑正常工作。

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