如何同步Storybook控件与Checkbox的手动状态变更？

你的问题核心是stories里的onChange没有同步更新Storybook的参数状态——手动点击Checkbox触发onChange时，只是调用了空函数，没告诉Storybook去更新控制面板里的checked值，所以控件状态和组件实际状态脱节。

直接修改checkbox.stories.tsx即可解决，步骤如下：

1. 引入Storybook的useArgs钩子
2. 在模板组件里重写onChange逻辑，用updateArgs同步参数状态

修改后的完整代码：

import React from 'react';
import { StoryFn, Meta, useArgs } from '@storybook/react'; // 新增useArgs导入
import Checkbox from './checkbox';

export default {
  title: 'UI Components/Checkbox',
  component: Checkbox,
} as Meta<typeof Checkbox>;

const Template: StoryFn<typeof Checkbox> = (args) => {
  const [_, updateArgs] = useArgs();
  // 自定义onChange，同步更新Storybook参数
  const handleChange = (checked: boolean) => {
    args.onChange(checked); // 保留原组件的onChange回调
    updateArgs({ checked }); // 更新控制面板的checked值
  };

  return <Checkbox {...args} onChange={handleChange} />;
};

export const Default = Template.bind({});
Default.args = {
  label: '我同意条款和条件',
  checked: false,
  onChange: () => {},
};

export const Checked = Template.bind({});
Checked.args = {
  label: '我同意条款和条件',
  checked: true,
  onChange: () => {},
};

简单解释 #

useArgs是Storybook提供的钩子，用来读取和更新当前story的参数。当你手动点击Checkbox时，handleChange会先执行组件原本的onChange逻辑，再通过updateArgs把新的checked值同步到控制面板，这样组件状态和控件面板就完全同步了。

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