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

如何解决通过事件道具传递所有参数

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

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

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

然后我有以下功能：

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

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

解决方法

这是我的解决方案：

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

,

我最终完全走向了不同的方向。问题是使用我的组件库的应用程序需要从我的组件返回某些参数，并带有 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);
};