我希望故事书插件操作显示其标准“日志”消息和实际的组件事件处理程序以更新 UI

Question

我似乎无法弄清楚如何让我的事件处理函数执行其逻辑来更新 UI 和故事书的插件 -actions()记录输出。

我希望更新 UI 的原因是我们使用 cypress.io 进行测试。我们已经破解/存根了操作消息传递（非常酷，window.postMessage）来访问允许使用的操作消息action("functionName")，而不是在 中连接事件处理函数[file].stories.tsx。为了我的理智，我想两者都做。要检查操作消息，只需单击几下。我宁愿看到该项目被删除。这样，为了进行测试，我希望收到操作消息（我能够做到这一点）。我们用来alert()检查是否有东西被解雇，但我不是粉丝。

如果这看起来没有必要，或者违反直觉/生产力，请详细说明。

如果它有帮助...<List />就是这样，但每个项目上都有一个操作按钮，可以从列表中删除该项目。

使用onRemove={actionHandler}下面的 List 中的 prop 就可以在 UI 中删除该项目，Cypress 很高兴，但需要alert()跟踪。但无法在任何地方连接action()并且无法在 GUI 中登录。

如果我删除onRemove={actionHandler}并取消注释// onRemove: action("removeItem")，我会得到我想要的操作日志，但该项目不会删除。

我知道操作应该模仿事件处理程序，但我希望它能够做到这一点并触发实际事件......如果可能或合理的话。

List.stories.tsx
// storybook addons
import { withKnobs } from "@storybook/addon-knobs";

// deps
import React from "react";
import { action } from "@storybook/addon-actions";

// utils
import { CustomEvent } from "../../hooks";

// components
import { Item } from "./Item"
import { List } from "./ListItems"
import { InputHeader } from "../inputs/InputHeader";

// create test states for target dropdown
export default {
  component: List,
  title: "Lists|With Action",
  decorators: [withKnobs]
};

const listItemsData = {
    values: ['Test Value 1', 'Test Value 2', 'Test Value 3', 'Test Value 4', 'Test Value 5'],
    name: "test list story",
    // onRemove: action("removeItem")
};

export const listWithActionButton = () => {
    const [listItemState, setListItemState] = React.useState(listItemsData)
    const actionHandler = (event: CustomEvent<string[]>) => {
        // action("removeItem")()
        setListItemState(prevState => ({
            ...listItemState,
            values: event.target.value,
        }))
    };

    return (
        <>
        <InputHeader headerText="List with Action Buttons" />
        <br/>
        <List 
            {...listItemState}
            onRemove={actionHandler}
            />
        </>
    )
};

List.tsx
export const List = ({name, values, onRemove}) => {
  const removeItem = (index: number) => {
      // this is what I want to fire AS WELL as the action log.
      const top = values.slice(0, index);
      const bottom = values.slice(index + 1);
      const updatedOptions = [...top, ...bottom]

      // Fire a custom event to match what our useForm hook expects
      const event: CustomEvent<string[]> = {
        target: {
          value: updatedOptions,
          name
        },
      };
      return onRemove(event);
    };

    return (
        <ListStyle>
            {
                values.map((item, index) => {
                    return (
                        <Item 
                            key={index} 
                            value={item} 
                            removeItem={removeItem}
                            itemIndex={index}
                        />)
                })
            }
        </ListStyle>
    )
};

Answer 1

如果你想触发一个动作并执行你的函数，你可以这样做。

  <Button
    onClick={(e) => {
      action('click')(e);
      removeItem();
    }}
    selected={state}
  >