如何在Storybook中为可选参数传入undefined值？

我正在为一个组件编写Storybook，组件的Prop类型定义如下：

value?: number;
fallbackText?: string;

组件的核心渲染逻辑简化为：

if (props.value === undefined && props.fallbackText)
    return <InnerComponent value={props.fallbackText} {...otherProps} />
return  <InnerComponent value={props.value} {...otherProps} />;

逻辑说明：当value为undefined且存在fallbackText时，组件会显示兜底文本；否则显示value的数值内容。我需要在单个Story中完整复现这一行为。

当前我的Storybook配置如下：

argTypes: {
    value: { control: 'number' },
    fallbackText: { control: 'text' }
},
args: {
    value: 100,
    fallbackText: undefined
}

遇到的问题：当我删除数字输入框中的内容时，预期会向组件传入undefined以触发兜底文本逻辑，但页面仅显示红色错误提示，并未实际将value设为undefined。

请问有没有插件或控制选项可以实现让value支持number | undefined类型，最好不需要修改组件本身？

解决方案 #

1. 启用Number控件的allowEmpty选项（Storybook 7+） #

Storybook 7及以上版本的原生number控件支持allowEmpty配置，开启后清空输入框会自动将值设为undefined，无需额外插件。修改argTypes配置如下：

argTypes: {
    value: { 
        control: { 
            type: 'number',
            allowEmpty: true // 开启空值支持
        } 
    },
    fallbackText: { control: 'text' }
},
args: {
    value: 100,
    fallbackText: undefined
}

2. 自定义控件处理空值（兼容旧版Storybook） #

如果使用的是Storybook 6或更早版本，可以通过自定义控件渲染函数手动处理空输入的转换逻辑：

argTypes: {
    value: {
        control: 'number',
        render: ({ value, onChange }) => (
            <input
                type="number"
                value={value ?? ''}
                onChange={(e) => {
                    const inputValue = e.target.value;
                    onChange(inputValue === '' ? undefined : Number(inputValue));
                }}
            />
        )
    },
    fallbackText: { control: 'text' }
}

该方式会将输入框的空内容转换为undefined传给组件，同时保留数字输入的原生特性。

3. 使用Select控件预设选项（快速演示方案） #

如果不需要支持任意数字输入，也可以用select控件提供预设选项，包含undefined和常用数值，直观演示兜底逻辑：

argTypes: {
    value: {
        control: {
            type: 'select',
            options: [undefined, 50, 100, 150]
        },
        // 为undefined设置友好的显示标签
        mapping: { undefined: 'Undefined（触发兜底文本）' }
    },
    fallbackText: { control: 'text' }
}

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