如何将事件从组件传递到嵌套函数?

Question

我有两个分裂的函数，我需要将一个值从一个传递到另一个，我正在做如下所示。const handleClick = icon.onClick(category)和const handleClick = () => icon.onClick(category)的区别是什么?

如何将event从组件传递到handleClick()函数?

export const useCategories = () => {
const handleClick = (category, something) => {
event.stopPropagation() // <-- 3. How to get event?
console.log(category, something) // <-- 4. Get every value
}
return {
icon: {
onClick: (category) => handleClick(category, 'anything') // <-- 2. add second var value
}
}
}
export const Categories = () => {
const { icon } = useCategories()
return (
<div>
{categories.map((category) => {
const handleClick = icon.onClick(category) // <-- 1. pass category value
return <Icon onClick={handleClick} />)}
}
</div>
)
}

Answer 1

您需要通过所有单击处理程序代理事件对象。我喜欢使用curry函数使附加点击处理程序更简单一点。别忘了给映射的图标添加一个react键。

export const useCategories = () => {
const handleClick = (event, category, something) => {
event.stopPropagation();
console.log(category, something);
};
return {
icon: {
// curried function to receive category and return onClick handler
onClick: category => event => handleClick(event, category, 'anything'),
}
}
}
export const Categories = () => {
const { icon } = useCategories();
return (
<div>
{categories.map((category, index) => (
<Icon
key={index}
onClick={icon.onClick(category)} // <-- set category
/>
)
</div>
);
}

Answer 2

onevent处理程序是某些DOM元素上的属性，用于管理该元素如何对事件作出反应。当事件处理程序被指定为HTML属性时，指定的代码将被包装成带有以下参数的函数:

• 事件-除onerror之外的所有事件处理程序.

事件

• 源,,lineno,colno，error对于onerror事件处理程序。注意，事件参数实际上包含错误消息作为字符串。

当事件处理程序被调用时，处理程序内部的this关键字被设置为该处理程序注册的DOM元素。有关详细信息，请参阅this关键字文档。

如果你想看更多内容，请点击

但是在你的代码中，你需要添加这个

<Icon onClick={(event) => icon.onClick(event, category, ...rest)} />

Answer 3

当您希望将event和category传递给click处理程序时，请修改传递给onClick的函数以传递参数。

export const useCategories = () => {
const handleClick = (event, ...rest) => {
event.stopPropagation();
console.log(rest);
};
return {
icon: {
onClick: (event, category) => handleClick(event, category, 'anything'),
},
};
};
export const Categories = () => {
const { icon } = useCategories();
return (
<div>
{categories.map((category) => {
return <Icon onClick={(event) => icon.onClick(event, category)} />;
})}
</div>
);
};

Answer 4

1. 当你不需要传递参数时，使用

   onClick={func}

   当你想传递参数时，你可以使用

   onClick={() => func(someParmeter)}

2. 传递事件只需写入

   onClick={e => func(e)}