通过事件道具传递所有参数

Question

我有一个 <Link /> 组件，它本质上只是一个样式化的 <a /> 标签。它需要一个 href 属性以及一个可选的 onClick。如果传入 onClick，我想 preventDefault() 事件并调用 onClick prop.

目前我的组件看起来像这样：

<a
    aria-label={ ariaLabel }
    className={ className }
    href={ href }
    onClick={ handleOnClick }
    target={ target }
    { ...rest }
>
    {children}
</a>

那么我有以下功能：

const handleOnClick = event => {
    event.preventDefault();
    onClick(event);
};

除非有参数通过 onClick 传入，否则这工作正常。我的 handleOnClick 函数只是将事件传回并且参数丢失了。如何传回可能已传入的所有参数？

Answer 1

这是我的解决方案：

const handleOnClick = (event, ...args) => {
    // here args will be an array.
    // so loop through it for additional arguments
    event.preventDefault();
    onClick(event);
};

Answer 2

我最终完全转向了不同的方向。问题在于，使用我的组件库的应用程序需要通过 onClick 等事件从我的组件返回某些参数。 vendorId 和 action 等参数。因此，与其在我的组件中创建 vendorId 和 action 道具，当您在处理不应该关心 vendorId 是什么的通用组件时，这并没有真正意义，我创建了一个 eventData 道具，允许消费者在对象中设置他们想要的任何数据，并且该对象将被传递回 onClick。

我目前正在处理的组件是一个菜单，所以我设置添加了一个 eventData 属性到我的 menuItems:

menuItems: PropTypes.arrayOf(
    PropTypes.shape({
        badge: PropTypes.number,
        eventData: PropTypes.objectOf(PropTypes.any),
        group: PropTypes.string,
        icon: PropTypes.oneOf([...ICONS, 'coin']),
        id: PropTypes.string.isRequired,
        label: PropTypes.string.isRequired,
    }),
),

然后每个菜单按钮都有这个 onClick:

<SimpleMenuButton onClick={ event => handleOnClick(event, item.eventData) }>

... 然后是 handleOnClick 处理程序：

const handleOnClick = (event, data) => {
    onClick(event, data);
};

通过事件道具传递所有参数

Passing all params through an event prop

javascript

event-handling

reactjs