如何在Storybook 8中通过函数更新组件参数？

要实现选择变化时更新rowsPerPage参数为选中值，需要在Story中使用Storybook提供的useArgs钩子管理动态状态——默认args是静态的，无法自动响应选择变化。

步骤1：修改Story代码，用useArgs维护状态 #

在Story文件中导入useArgs钩子，在InUse故事的render函数里重写事件处理逻辑，通过updateArgs更新rowsPerPage参数：

import { useArgs } from '@storybook/react';
// 保留原有其他导入

export const InUse: Story = {
  args: {
    rowsPerPage: 10,
    handleChangeRowsPerPage: () => {}
  },
  render: (args) => {
    const [, updateArgs] = useArgs();
    
    const handleChange = (event) => {
      const newValue = Number(event.target.value);
      updateArgs({ rowsPerPage: newValue });
      // 保留原有日志需求的话可以加这行
      console.log(newValue);
    };
    
    return <SelectInput {...args} handleChangeRowsPerPage={handleChange} />;
  },
};

步骤2：优化组件代码（可选但推荐） #

当前组件中把rowsPerPage转成字符串传给Select的value，其实Material-UI的Select支持直接传入数字类型value，可避免类型转换，让代码更严谨：

function SelectInput({
  rowsPerPage,
  handleChangeRowsPerPage
}: {
  rowsPerPage: number;
  handleChangeRowsPerPage: (event: SelectChangeEvent) => void;
}) {
  return (
    <FormControl className="storybook-select-input">
      <InputLabel id="demo-simple-select-label">Rows per page</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={rowsPerPage} {/* 去掉toString()，直接传入数字 */}
        label="Rows per page"
        onChange={handleChangeRowsPerPage}
      >
        <MenuItem value={5}>5</MenuItem>
        <MenuItem value={10}>10</MenuItem>
        <MenuItem value={15}>15</MenuItem>
        <MenuItem value={25}>25</MenuItem>
        <MenuItem value={50}>50</MenuItem>
        <MenuItem value={75}>75</MenuItem>
        <MenuItem value={100}>100</MenuItem>
      </Select>
    </FormControl>
  );
}

export default SelectInput;

关键说明 #

• useArgs是Storybook 8 CSF3格式的内置钩子，调用后返回当前args对象和updateArgs函数，用于动态更新组件参数。
• 事件中event.target.value默认是字符串类型，必须转成数字才能匹配rowsPerPage的number类型定义。

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