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

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>
  );
}

这个 一个事件 处理程序是特定DOM元素的属性,用于管理该元素对事件的反应方式。

• 事件 一个错误 .

• 事件 , 来源 行号 ,和 错误 对于 一个错误 事件处理程序。 消息作为字符串。

调用事件处理程序时,处理程序中的this关键字将设置为注册处理程序的DOM元素。有关详细信息,请参阅,请参阅 the this keyword documentation.

如果你想看的更多, this

但是在你的代码里,你需要加上这个

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

因为你想通过考试 event 和 category 对于click处理程序,修改传递给的函数 onClick 通过args。

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>
  );
};

1. onClick={func}

   当你想传递你使用的参数时

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

2. 要传递事件,只需编写

   onClick={e => func(e)}